From 5521945cc712d3166ff62aae1c7b01a81bd36ba7 Mon Sep 17 00:00:00 2001
From: blam <ben@blam.sh>
Date: Tue, 25 Jan 2022 19:37:04 +0100
Subject: [PATCH] feat: added some more behaviour to the HostPicker as noticed
 that when no hosts are supplied it breaks currently

Signed-off-by: blam <ben@blam.sh>
---
 .../RepoUrlPicker/RepoUrlPicker.test.tsx      | 19 ++++++++++++++++---
 .../fields/RepoUrlPicker/RepoUrlPicker.tsx    |  6 +++++-
 .../RepoUrlPicker/RepoUrlPickerHost.tsx       | 19 +++++++++++++------
 3 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx
index f31b152882..6f37a9a1f6 100644
--- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx
+++ b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx
@@ -14,26 +14,37 @@
  * limitations under the License.
  */
 import React from 'react';
-import { render } from '@testing-library/react';
 import { RepoUrlPicker } from './RepoUrlPicker';
 import Form from '@rjsf/core';
 import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
 import {
   scmIntegrationsApiRef,
+  ScmIntegrationsApi,
   scmAuthApiRef,
 } from '@backstage/integration-react';
 import { scaffolderApiRef } from '../../../api';
 import { SecretsContextProvider } from '../../secrets/SecretsContext';
+import { ScaffolderApi } from '../../..';
 
 describe('RepoUrlPicker', () => {
+  const mockScaffolderApi: Partial<ScaffolderApi> = {
+    getIntegrationsList: async () => [
+      { host: 'github.com', type: 'github', title: 'github.com' },
+    ],
+  };
+
+  const mockIntegrationsApi: Partial<ScmIntegrationsApi> = {
+    byHost: () => ({ type: 'github' }),
+  };
+
   describe('happy path rendering', () => {
     it('should render the repo url picker', async () => {
       const { getByRole } = await renderInTestApp(
         <TestApiProvider
           apis={[
-            [scmIntegrationsApiRef, {}],
+            [scmIntegrationsApiRef, mockIntegrationsApi],
             [scmAuthApiRef, {}],
-            [scaffolderApiRef, {}],
+            [scaffolderApiRef, mockScaffolderApi],
           ]}
         >
           <SecretsContextProvider>
@@ -47,6 +58,8 @@ describe('RepoUrlPicker', () => {
         </TestApiProvider>,
       );
 
+      await new Promise(resolve => setTimeout(resolve, 3000));
+
       console.log(getByRole('form'));
     });
   });
diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.tsx b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.tsx
index b4a1eedc8e..e436a76f3c 100644
--- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.tsx
+++ b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.tsx
@@ -93,6 +93,8 @@ export const RepoUrlPicker = (
       }
 
       // user has requested that we use the users credentials
+      // so lets grab them using the scmAuthApi and pass through
+      // any additional scopes from the ui:options
       const { token } = await scmAuthApi.getCredentials({
         url: `https://${state.host}/${state.owner}/${state.repoName}`,
         additionalScope: {
@@ -101,10 +103,12 @@ export const RepoUrlPicker = (
         },
       });
 
+      // set the secret using the key provided in the the ui:options for use
+      // in the templating the manifest with ${{ secrets[resultSecretsKey] }}
       setSecret({ [requestUserCredentials.resultSecretsKey]: token });
     },
     1000,
-    [state],
+    [state, uiSchema],
   );
 
   const hostType =
diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPickerHost.tsx b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPickerHost.tsx
index 652e214714..ec09494a1b 100644
--- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPickerHost.tsx
+++ b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPickerHost.tsx
@@ -37,16 +37,23 @@ export const RepoUrlPickerHost = (props: {
   });
 
   useEffect(() => {
-    if (hosts && hosts.length && !host) {
-      // This is only hear to set the default as the first one in the hosts array
-      // if the host is not set yet and there is a list of hosts.
-      onChange(hosts[0]);
+    // If there is no host chosen currently
+    if (!host) {
+      // Set the first of the allowedHosts option if that available
+      if (hosts?.length) {
+        onChange(hosts[0]);
+        // if there's no hosts provided, fallback to using the first integration
+      } else if (integrations?.length) {
+        onChange(integrations[0].host);
+      }
     }
-  }, [hosts, host, onChange]);
+  }, [hosts, host, onChange, integrations]);
 
+  // If there are no allowedHosts provided, then show all integrations. Otherwise, only show integrations
+  // that are provided in the dropdown for the user to choose from.
   const hostsOptions: SelectItem[] = integrations
     ? integrations
-        .filter(i => hosts?.includes(i.host))
+        .filter(i => (hosts?.length ? hosts?.includes(i.host) : true))
         .map(i => ({ label: i.title, value: i.host }))
     : [{ label: 'Loading...', value: 'loading' }];