Merge pull request desktop#19160 from desktop/fix-custom-integration-…

…zero-case

Fix custom integration zero case

app/src/ui/preferences/integrations.tsx

@@ -88,6 +88,30 @@ export class Integrations extends React.Component<
     })
   }
 
+  public componentDidMount(): void {
+    if (enableCustomIntegration()) {
+      const {
+        availableEditors,
+        availableShells,
+        useCustomEditor,
+        useCustomShell,
+      } = this.props
+
+      // When there are no available editors or shells, the `Select` component
+      // will have the custom editor or shell already selected, but we need
+      // to handle that as initial value, otherwise the custom integration
+      // form won't be rendered.
+
+      if (availableEditors.length === 0 && !useCustomEditor) {
+        this.setSelectedEditor(CustomIntegrationValue)
+      }
+
+      if (availableShells.length === 0 && !useCustomShell) {
+        this.setSelectedShell(CustomIntegrationValue)
+      }
+    }
+  }
+
   public componentDidUpdate(
     prevProps: IIntegrationsPreferencesProps,
     prevState: IIntegrationsPreferencesState
@@ -111,16 +135,20 @@ export class Integrations extends React.Component<
       return
     }
 
-    if (value === CustomIntegrationValue) {
+    this.setSelectedEditor(value)
+  }
+
+  private setSelectedEditor = (editor: string) => {
+    if (editor === CustomIntegrationValue) {
       this.setState({ useCustomEditor: true })
       this.props.onUseCustomEditorChanged(true)
     } else {
       this.setState({
         useCustomEditor: false,
-        selectedExternalEditor: value,
+        selectedExternalEditor: editor,
       })
       this.props.onUseCustomEditorChanged(false)
-      this.props.onSelectedEditorChanged(value)
+      this.props.onSelectedEditorChanged(editor)
     }
   }
 
@@ -132,11 +160,15 @@ export class Integrations extends React.Component<
       return
     }
 
-    if (value === CustomIntegrationValue) {
+    this.setSelectedShell(value)
+  }
+
+  private setSelectedShell = (shell: string) => {
+    if (shell === CustomIntegrationValue) {
       this.setState({ useCustomShell: true })
       this.props.onUseCustomShellChanged(true)
     } else {
-      const parsedValue = parseShell(value)
+      const parsedValue = parseShell(shell)
       this.setState({
         useCustomShell: false,
         selectedShell: parsedValue,
@@ -207,7 +239,7 @@ export class Integrations extends React.Component<
       <Row>
         <div className="no-options-found">
           <span>
-            No editors found.{' '}
+            No other editors found.{' '}
             <LinkButton uri={suggestedExternalEditor.url}>
               Install {suggestedExternalEditor.name}?
             </LinkButton>
@@ -334,8 +366,8 @@ export class Integrations extends React.Component<
             <h2>{__DARWIN__ ? 'External Editor' : 'External editor'}</h2>
           </legend>
           <Row>{this.renderExternalEditor()}</Row>
-          {this.renderNoExternalEditorHint()}
           {this.state.useCustomEditor && this.renderCustomExternalEditor()}
+          {this.renderNoExternalEditorHint()}
         </fieldset>
         <fieldset>
           <legend>