Expose iOS "setting" in settings

Summary:
Adds an iOS "setting" to the settings, but it's automatically set based on xcode-select for minimum required effort.

Helpful text added to tell you how to enable it if it's disabled.

Reviewed By: passy

Differential Revision: D17830940

fbshipit-source-id: 53e1e40c5b96e29b30036259cc774ab14097a1da

src/chrome/SettingsSheet.tsx

@@ -13,7 +13,7 @@ import {State as Store} from '../reducers';
 import {Settings} from '../reducers/settings';
 import {flush} from '../utils/persistor';
 import ToggledSection from './settings/ToggledSection';
-import {FilePathConfigField} from './settings/configFields';
+import {FilePathConfigField, ConfigText} from './settings/configFields';
 import {remote} from 'electron';
 import isEqual from 'lodash.isequal';
 
@@ -35,6 +35,7 @@ type OwnProps = {
 
 type StateFromProps = {
   settings: Settings;
+  isXcodeDetected: boolean;
 };
 
 type DispatchFromProps = {
@@ -65,8 +66,8 @@ class SettingsSheet extends Component<Props, State> {
       <Container>
         <Title>Settings</Title>
         <ToggledSection
-          label="Android"
+          label="Android Developer"
-          enabled={this.state.updatedSettings.enableAndroid}
+          toggled={this.state.updatedSettings.enableAndroid}
           onChange={v => {
             this.setState({
               updatedSettings: {
@@ -88,7 +89,18 @@ class SettingsSheet extends Component<Props, State> {
             }}
           />
         </ToggledSection>
-
+        <ToggledSection
+          label="iOS Developer"
+          toggled={this.props.isXcodeDetected}
+          frozen>
+          {' '}
+          <ConfigText
+            content={
+              'Use xcode-select to enable or switch between xcode versions'
+            }
+            frozen
+          />
+        </ToggledSection>
         <br />
         <FlexRow>
           <Spacer />
@@ -110,6 +122,9 @@ class SettingsSheet extends Component<Props, State> {
 }
 
 export default connect<StateFromProps, DispatchFromProps, OwnProps, Store>(
-  ({settingsState}) => ({settings: settingsState}),
+  ({settingsState, application}) => ({
+    settings: settingsState,
+    isXcodeDetected: application.xcodeCommandLineToolsDetected,
+  }),
   {updateSettings},
 )(SettingsSheet);

src/chrome/settings/ToggledSection.tsx

@@ -17,28 +17,31 @@ const GreyedOutOverlay = styled('div')({
   opacity: 0.6,
   height: '100%',
   position: 'absolute',
-  left: 50,
+  left: 0,
   right: 0,
 });
 
 export default function ToggledSection(props: {
   label: string;
-  enabled: boolean;
+  toggled: boolean;
-  onChange: (value: boolean) => void;
+  onChange?: (value: boolean) => void;
-  children: React.ReactNode;
+  children?: React.ReactNode;
+  // Whether to disallow interactions with this toggle
+  frozen?: boolean;
 }) {
   return (
     <FlexColumn>
       <FlexRow>
         <ToggleButton
           label={props.label}
-          onClick={() => props.onChange(!props.enabled)}
+          onClick={() => props.onChange && props.onChange(!props.toggled)}
-          toggled={props.enabled}
+          toggled={props.toggled}
         />
+        {props.frozen && <GreyedOutOverlay />}
       </FlexRow>
       <IndentedSection>
         {props.children}
-        {props.enabled ? null : <GreyedOutOverlay />}
+        {props.toggled ? null : <GreyedOutOverlay />}
       </IndentedSection>
     </FlexColumn>
   );

src/chrome/settings/configFields.tsx

@@ -36,10 +36,21 @@ const CenteredGlyph = styled(Glyph)({
   marginLeft: 10,
 });
 
+const GreyedOutOverlay = styled('div')({
+  backgroundColor: '#EFEEEF',
+  borderRadius: 4,
+  opacity: 0.6,
+  height: '100%',
+  position: 'absolute',
+  left: 0,
+  right: 0,
+});
+
 export function FilePathConfigField(props: {
   label: string;
   defaultValue: string;
   onChange: (path: string) => void;
+  frozen?: boolean;
 }) {
   const [value, setValue] = useState(props.defaultValue);
   const [isValid, setIsValid] = useState(true);
@@ -80,6 +91,16 @@ export function FilePathConfigField(props: {
       {isValid ? null : (
         <CenteredGlyph name="caution-triangle" color={colors.yellow} />
       )}
+      {props.frozen && <GreyedOutOverlay />}
+    </ConfigFieldContainer>
+  );
+}
+
+export function ConfigText(props: {content: string; frozen?: boolean}) {
+  return (
+    <ConfigFieldContainer>
+      <InfoText>{props.content}</InfoText>
+      {props.frozen && <GreyedOutOverlay />}
     </ConfigFieldContainer>
   );
 }