Implement PR feedback

Signed-off-by: Niek Rossen <niek.rossen@infosupport.com>

plugins/octopus-deploy/README.md

@@ -23,7 +23,7 @@ This plugin (currently) uses the Backstage proxy to securely communicate with th
 
 To use it, you will need to generate an [API Key](https://octopus.com/docs/octopus-rest-api/how-to-create-an-api-key) within Octopus Deploy.
 
-1. Add the following to your app-config.yaml to enable the proxy:
+Add the following to your app-config.yaml to enable the proxy:
 
 ```
 // app-config.yaml
@@ -44,7 +44,7 @@ octopusdeploy:
 
 #### Adding the Entities
 
-1. Add the following to `EntityPage.tsx` to display Octopus Releases
+Add the following to `EntityPage.tsx` to display Octopus Releases
 
 ```
 // In packages/app/src/components/catalog/EntityPage.tsx
@@ -63,7 +63,7 @@ const cicdContent = (
 )
 ```
 
-2. Add `octopus.com/project-id` annotation in the catalog descriptor file.
+Add `octopus.com/project-id` annotation in the catalog descriptor file.
 
 To obtain a projects ID you will have to query the Octopus API. In the future we'll add support for using a projects slug as well.
 

plugins/octopus-deploy/src/api/index.ts

@@ -165,8 +165,7 @@ export class OctopusDeployClient implements OctopusDeployApi {
   }
 
   async getProjectGroups(): Promise<OctopusProjectGroup[]> {
-    const proxyUrl = await this.discoveryApi.getBaseUrl('proxy');
-    const url = `${proxyUrl}${this.proxyPathBase}/projectgroups/all`;
+    const url = await this.getProjectGroupApiUrl();
     const response = await this.fetchApi.fetch(url);
 
     let responseJson;
@@ -217,4 +216,9 @@ export class OctopusDeployClient implements OctopusDeployApi {
       projectReference.projectId,
     )}`;
   }
+
+  private async getProjectGroupApiUrl(): Promise<string> {
+    const proxyUrl = await this.discoveryApi.getBaseUrl('proxy');
+    return `${proxyUrl}${this.proxyPathBase}/projectgroups/all`;
+  }
 }

plugins/octopus-deploy/src/components/ScaffolderDropdown/ProjectGroupDropdown.tsx

@@ -15,8 +15,12 @@
  */
 
 import React from 'react';
-import FormControl from '@material-ui/core/FormControl';
-import { InputLabel, Input, FormHelperText } from '@material-ui/core';
+import {
+  InputLabel,
+  Input,
+  FormControl,
+  FormHelperText,
+} from '@material-ui/core';
 import { Select, SelectItem } from '@backstage/core-components';
 import { useProjectGroups } from '../../hooks/useProjectGroups';
 import { ProjectGroupDropdownProps } from './schema';
@@ -50,6 +54,8 @@ export const ProjectGroupDropdown = ({
         <Select
           label="Project Group"
           onChange={p => {
+            // param p is an array if the select is multi-select,
+            // since this is single-select we can just take the first element
             updateProjectGroup(String(Array.isArray(p) ? p[0] : p));
           }}
           disabled={projectGroups.length === 1}

plugins/octopus-deploy/src/hooks/useProjectGroups.ts

@@ -18,7 +18,7 @@ import useAsync from 'react-use/lib/useAsync';
 import { octopusDeployApiRef, OctopusProjectGroup } from '../api';
 
 export function useProjectGroups(): {
-  projectGroups?: OctopusProjectGroup[];
+  projectGroups: OctopusProjectGroup[];
   loading: boolean;
   error?: Error;
 } {
@@ -29,7 +29,7 @@ export function useProjectGroups(): {
   }, [api]);
 
   return {
-    projectGroups: value,
+    projectGroups: value ? value : [],
     loading,
     error,
   };