Use RadioGroup for git config options

Author: tidy-dev

app/src/ui/repository-settings/git-config.tsx

@@ -4,7 +4,8 @@ import { Account } from '../../models/account'
 import { GitConfigUserForm } from '../lib/git-config-user-form'
 import { getDotComAPIEndpoint } from '../../lib/api'
 import { Row } from '../lib/row'
-import { RadioButton } from '../lib/radio-button'
+import { RadioGroup } from '../lib/radio-group'
+import { assertNever } from '../../lib/fatal-error'
 
 interface IGitConfigProps {
   readonly account: Account | null
@@ -32,36 +33,41 @@ export class GitConfig extends React.Component<IGitConfigProps> {
     this.props.onGitConfigLocationChanged(value)
   }
 
+  private renderConfigOptionLabel = (key: GitConfigLocation) => {
+    switch (key) {
+      case GitConfigLocation.Global:
+        return 'Use my global Git config'
+      case GitConfigLocation.Local:
+        return 'Use a local Git config'
+      default:
+        return assertNever(key, `Unknown git config location: ${key}`)
+    }
+  }
+
   public render() {
     const isDotComAccount =
       this.props.account !== null &&
       this.props.account.endpoint === getDotComAPIEndpoint()
     const enterpriseAccount = isDotComAccount ? null : this.props.account
     const dotComAccount = isDotComAccount ? this.props.account : null
 
+    const configOptions = [GitConfigLocation.Global, GitConfigLocation.Local]
+    const selectionOption =
+      configOptions.find(o => o === this.props.gitConfigLocation) ??
+      GitConfigLocation.Global
+
     return (
       <DialogContent>
         <div className="advanced-section">
-          <h2>For this repository I wish to</h2>
+          <h2 id="git-config-heading">For this repository I wish to</h2>
           <Row>
-            <div>
-              <RadioButton
-                label="Use my global Git config"
-                checked={
-                  this.props.gitConfigLocation === GitConfigLocation.Global
-                }
-                value={GitConfigLocation.Global}
-                onSelected={this.onGitConfigLocationChanged}
-              />
-              <RadioButton
-                label="Use a local Git config"
-                checked={
-                  this.props.gitConfigLocation === GitConfigLocation.Local
-                }
-                value={GitConfigLocation.Local}
-                onSelected={this.onGitConfigLocationChanged}
-              />
-            </div>
+            <RadioGroup<GitConfigLocation>
+              ariaLabelledBy="git-config-heading"
+              selectedKey={selectionOption}
+              radioButtonKeys={configOptions}
+              onSelectionChanged={this.onGitConfigLocationChanged}
+              renderRadioButtonLabelContents={this.renderConfigOptionLabel}
+            />
           </Row>
           <GitConfigUserForm
             email={