From 982440004d721a9580fbee597f38cd3e132353b5 Mon Sep 17 00:00:00 2001
From: Niek Rossen <niek.rossen@infosupport.com>
Date: Mon, 18 Mar 2024 13:13:28 +0100
Subject: [PATCH 01/12] Add Octopus Deploy custom field extensions

Signed-off-by: Niek Rossen <niek.rossen@infosupport.com>
---
 plugins/octopus-deploy/README.md              | 42 ++++++++++-
 plugins/octopus-deploy/package.json           |  5 +-
 plugins/octopus-deploy/src/api/index.ts       | 32 ++++++++
 .../ProjectGroupDropdown.tsx                  | 74 +++++++++++++++++++
 .../components/ScaffolderDropdown/index.ts    | 16 ++++
 .../components/ScaffolderDropdown/schema.ts   | 25 +++++++
 .../src/hooks/useProjectGroups.ts             | 36 +++++++++
 plugins/octopus-deploy/src/plugin.ts          | 12 +++
 yarn.lock                                     |  3 +
 9 files changed, 242 insertions(+), 3 deletions(-)
 create mode 100644 plugins/octopus-deploy/src/components/ScaffolderDropdown/ProjectGroupDropdown.tsx
 create mode 100644 plugins/octopus-deploy/src/components/ScaffolderDropdown/index.ts
 create mode 100644 plugins/octopus-deploy/src/components/ScaffolderDropdown/schema.ts
 create mode 100644 plugins/octopus-deploy/src/hooks/useProjectGroups.ts

diff --git a/plugins/octopus-deploy/README.md b/plugins/octopus-deploy/README.md
index ee7d9d8543..f6de7dc392 100644
--- a/plugins/octopus-deploy/README.md
+++ b/plugins/octopus-deploy/README.md
@@ -41,7 +41,9 @@ octopusdeploy:
   webBaseUrl: "<your-octopus-web-url>"
 ```
 
-2. Add the following to `EntityPage.tsx` to display Octopus Releases
+#### Adding the Entities
+
+1. Add the following to `EntityPage.tsx` to display Octopus Releases
 
 ```
 // In packages/app/src/components/catalog/EntityPage.tsx
@@ -60,7 +62,7 @@ const cicdContent = (
 )
 ```
 
-3. Add `octopus.com/project-id` annotation in the catalog descriptor file.
+2. 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.
 
@@ -93,3 +95,39 @@ spec:
 You can get the ID of the space from the URL in the Octopus Deploy UI.
 
 All set, you will be able to see the plugin in action!
+
+### Adding Scaffolder field extensions
+
+To add the Octopus Deploy custom fields extensions, add the following to your `App.tsx`:
+
+```tsx
+// In packages/app/src/App.tsx
+import { OctopusDeployDropdownFieldExtension } from '@backstage/plugin-octopus-deploy';
+const routes = (
+  <FlatRoutes>
+    ...
+    <Route path="/create" element={<ScaffolderPage />}>
+      <ScaffolderFieldExtensions>
+        <OctopusDeployDropdownFieldExtension />
+      </ScaffolderFieldExtensions>
+    </Route>
+    ...
+  </FlatRoutes>
+```
+
+To use the Octopus Deploy custom field extensions, add the following to your `template.yaml`:
+
+```yaml
+# In the template.yaml
+apiVersion: scaffolder.backstage.io/v1beta3
+kind: Template
+metadata:
+  # ...
+  parameters:
+    - title: Octopus Project Group
+      properties:
+        projectName:
+          title: Octopus Project Group
+          type: string
+          ui:field: OctopusDeployProjectGroupDropdown
+```
diff --git a/plugins/octopus-deploy/package.json b/plugins/octopus-deploy/package.json
index 7f76cdcd27..49488e6515 100644
--- a/plugins/octopus-deploy/package.json
+++ b/plugins/octopus-deploy/package.json
@@ -37,9 +37,12 @@
     "@backstage/core-components": "workspace:^",
     "@backstage/core-plugin-api": "workspace:^",
     "@backstage/plugin-catalog-react": "workspace:^",
+    "@backstage/plugin-scaffolder": "workspace:^",
+    "@backstage/plugin-scaffolder-react": "workspace:^",
     "@material-ui/core": "^4.9.13",
     "@types/react": "^16.13.1 || ^17.0.0 || ^18.0.0",
-    "react-use": "^17.2.4"
+    "react-use": "^17.2.4",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@backstage/cli": "workspace:^",
diff --git a/plugins/octopus-deploy/src/api/index.ts b/plugins/octopus-deploy/src/api/index.ts
index cb5d428308..15451cd79f 100644
--- a/plugins/octopus-deploy/src/api/index.ts
+++ b/plugins/octopus-deploy/src/api/index.ts
@@ -62,6 +62,13 @@ export type OctopusProject = {
   Links: OctopusLinks;
 };
 
+/** @public */
+export type OctopusProjectGroup = {
+  Id: string;
+  Name: string;
+  Description: string;
+};
+
 /** @public */
 export type OctopusPluginConfig = {
   WebUiBaseUrl: string;
@@ -82,6 +89,7 @@ export interface OctopusDeployApi {
     releaseHistoryCount: number;
   }): Promise<OctopusProgression>;
   getProjectInfo(projectReference: ProjectReference): Promise<OctopusProject>;
+  getProjectGroups(): Promise<OctopusProjectGroup[]>;
   getConfig(): Promise<OctopusPluginConfig>;
 }
 
@@ -156,6 +164,30 @@ export class OctopusDeployClient implements OctopusDeployApi {
     return responseJson;
   }
 
+  async getProjectGroups(): Promise<OctopusProjectGroup[]> {
+    const proxyUrl = await this.discoveryApi.getBaseUrl('proxy');
+    const url = `${proxyUrl}${this.proxyPathBase}/projectgroups/all`;
+    const response = await this.fetchApi.fetch(url);
+
+    let responseJson;
+
+    try {
+      responseJson = await response.json();
+    } catch (e) {
+      responseJson = { releases: [] };
+    }
+
+    if (response.status !== 200) {
+      throw new Error(
+        `Error communicating with Octopus Deploy: ${
+          responseJson?.error?.title || response.statusText
+        }`,
+      );
+    }
+
+    return responseJson;
+  }
+
   async getConfig(): Promise<OctopusPluginConfig> {
     return {
       WebUiBaseUrl: this.configApi.getString(WEB_UI_BASE_URL_CONFIG_KEY),
diff --git a/plugins/octopus-deploy/src/components/ScaffolderDropdown/ProjectGroupDropdown.tsx b/plugins/octopus-deploy/src/components/ScaffolderDropdown/ProjectGroupDropdown.tsx
new file mode 100644
index 0000000000..7d70bcd28e
--- /dev/null
+++ b/plugins/octopus-deploy/src/components/ScaffolderDropdown/ProjectGroupDropdown.tsx
@@ -0,0 +1,74 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import FormControl from '@material-ui/core/FormControl';
+import { InputLabel, Input, FormHelperText } from '@material-ui/core';
+import { Select, SelectItem } from '@backstage/core-components';
+import { useProjectGroups } from '../../hooks/useProjectGroups';
+import { ProjectGroupDropdownProps } from './schema';
+
+export const ProjectGroupDropdown = ({
+  onChange,
+  rawErrors,
+  required,
+  formData,
+}: ProjectGroupDropdownProps) => {
+  const [selectedProjectGroup, setSelectedProjectGroup] =
+    React.useState<string>('');
+  const { projectGroups } = useProjectGroups();
+
+  const projectGroupItems: SelectItem[] = projectGroups
+    ? projectGroups.map(pg => ({ label: pg.Name, value: pg.Name }))
+    : [];
+
+  const updateProjectGroup = (pg: string) => {
+    setSelectedProjectGroup(pg);
+    onChange(pg);
+  };
+
+  return (
+    <FormControl
+      margin="normal"
+      required={required}
+      error={rawErrors?.length > 0 && !formData}
+    >
+      {projectGroups?.length ? (
+        <Select
+          label="Project Group"
+          onChange={p => {
+            updateProjectGroup(String(Array.isArray(p) ? p[0] : p));
+          }}
+          disabled={projectGroups.length === 1}
+          selected={selectedProjectGroup}
+          items={projectGroupItems}
+        />
+      ) : (
+        <>
+          <InputLabel>Project Group</InputLabel>
+          <Input
+            id="project-group-input"
+            onChange={e => onChange(e.target.value)}
+            value={formData}
+          />
+        </>
+      )}
+      <FormHelperText>
+        The project group of the within Octopus Deploy.
+      </FormHelperText>
+    </FormControl>
+  );
+};
diff --git a/plugins/octopus-deploy/src/components/ScaffolderDropdown/index.ts b/plugins/octopus-deploy/src/components/ScaffolderDropdown/index.ts
new file mode 100644
index 0000000000..ce790d0674
--- /dev/null
+++ b/plugins/octopus-deploy/src/components/ScaffolderDropdown/index.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { ProjectGroupDropdown } from './ProjectGroupDropdown';
diff --git a/plugins/octopus-deploy/src/components/ScaffolderDropdown/schema.ts b/plugins/octopus-deploy/src/components/ScaffolderDropdown/schema.ts
new file mode 100644
index 0000000000..651133bced
--- /dev/null
+++ b/plugins/octopus-deploy/src/components/ScaffolderDropdown/schema.ts
@@ -0,0 +1,25 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import z from 'zod';
+import { makeFieldSchemaFromZod } from '@backstage/plugin-scaffolder';
+
+const ProjectGroupDropdownFieldSchema = makeFieldSchemaFromZod(z.string());
+
+export const ProjectGroupDropdownSchema =
+  ProjectGroupDropdownFieldSchema.schema;
+
+export type ProjectGroupDropdownProps =
+  typeof ProjectGroupDropdownFieldSchema.type;
diff --git a/plugins/octopus-deploy/src/hooks/useProjectGroups.ts b/plugins/octopus-deploy/src/hooks/useProjectGroups.ts
new file mode 100644
index 0000000000..a4dce172c0
--- /dev/null
+++ b/plugins/octopus-deploy/src/hooks/useProjectGroups.ts
@@ -0,0 +1,36 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useApi } from '@backstage/core-plugin-api';
+import useAsync from 'react-use/lib/useAsync';
+import { octopusDeployApiRef, OctopusProjectGroup } from '../api';
+
+export function useProjectGroups(): {
+  projectGroups?: OctopusProjectGroup[];
+  loading: boolean;
+  error?: Error;
+} {
+  const api = useApi(octopusDeployApiRef);
+
+  const { value, loading, error } = useAsync(() => {
+    return api.getProjectGroups();
+  }, [api]);
+
+  return {
+    projectGroups: value,
+    loading,
+    error,
+  };
+}
diff --git a/plugins/octopus-deploy/src/plugin.ts b/plugins/octopus-deploy/src/plugin.ts
index 39b2b49fb7..ebb3238254 100644
--- a/plugins/octopus-deploy/src/plugin.ts
+++ b/plugins/octopus-deploy/src/plugin.ts
@@ -27,7 +27,11 @@ import {
   configApiRef,
 } from '@backstage/core-plugin-api';
 
+import { createScaffolderFieldExtension } from '@backstage/plugin-scaffolder-react';
+
 import { Entity } from '@backstage/catalog-model';
+import { ProjectGroupDropdown } from './components/ScaffolderDropdown';
+import { ProjectGroupDropdownSchema } from './components/ScaffolderDropdown/schema';
 
 /** @public */
 export const isOctopusDeployAvailable = (entity: Entity) =>
@@ -61,3 +65,11 @@ export const EntityOctopusDeployContent = octopusDeployPlugin.provide(
     mountPoint: octopusDeployEntityContentRouteRef,
   }),
 );
+
+export const OctopusDeployDropdownFieldExtension = octopusDeployPlugin.provide(
+  createScaffolderFieldExtension({
+    name: 'OctopusDeployProjectGroupDropdown',
+    schema: ProjectGroupDropdownSchema,
+    component: ProjectGroupDropdown,
+  }),
+);
diff --git a/yarn.lock b/yarn.lock
index 46e5db8616..56b2b7e617 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7961,12 +7961,15 @@ __metadata:
     "@backstage/core-plugin-api": "workspace:^"
     "@backstage/dev-utils": "workspace:^"
     "@backstage/plugin-catalog-react": "workspace:^"
+    "@backstage/plugin-scaffolder": "workspace:^"
+    "@backstage/plugin-scaffolder-react": "workspace:^"
     "@material-ui/core": ^4.9.13
     "@testing-library/dom": ^9.0.0
     "@testing-library/jest-dom": ^6.0.0
     "@testing-library/react": ^14.0.0
     "@types/react": ^16.13.1 || ^17.0.0 || ^18.0.0
     react-use: ^17.2.4
+    zod: ^3.22.4
   peerDependencies:
     react: ^16.13.1 || ^17.0.0 || ^18.0.0
     react-dom: ^16.13.1 || ^17.0.0 || ^18.0.0

From b55a10893773dab985238522b32f6f5d892ad6ea Mon Sep 17 00:00:00 2001
From: Niek Rossen <niek.rossen@infosupport.com>
Date: Mon, 18 Mar 2024 13:16:58 +0100
Subject: [PATCH 02/12] Refactor ProjectGroupDropdown component and schema

Signed-off-by: Niek Rossen <niek.rossen@infosupport.com>
---
 plugins/octopus-deploy/src/index.ts  | 1 +
 plugins/octopus-deploy/src/plugin.ts | 1 +
 2 files changed, 2 insertions(+)

diff --git a/plugins/octopus-deploy/src/index.ts b/plugins/octopus-deploy/src/index.ts
index 2b39431606..b5134c9ca2 100644
--- a/plugins/octopus-deploy/src/index.ts
+++ b/plugins/octopus-deploy/src/index.ts
@@ -16,6 +16,7 @@
 export {
   octopusDeployPlugin,
   EntityOctopusDeployContent,
+  OctopusDeployDropdownFieldExtension,
   isOctopusDeployAvailable,
 } from './plugin';
 
diff --git a/plugins/octopus-deploy/src/plugin.ts b/plugins/octopus-deploy/src/plugin.ts
index ebb3238254..ac6f1e5981 100644
--- a/plugins/octopus-deploy/src/plugin.ts
+++ b/plugins/octopus-deploy/src/plugin.ts
@@ -66,6 +66,7 @@ export const EntityOctopusDeployContent = octopusDeployPlugin.provide(
   }),
 );
 
+/** @public */
 export const OctopusDeployDropdownFieldExtension = octopusDeployPlugin.provide(
   createScaffolderFieldExtension({
     name: 'OctopusDeployProjectGroupDropdown',

From 73abb2dea8a8cc3e548bc72a9c980fa33a93780f Mon Sep 17 00:00:00 2001
From: Niek Rossen <niek.rossen@infosupport.com>
Date: Mon, 18 Mar 2024 14:13:36 +0100
Subject: [PATCH 03/12] Update proxy configuration

Signed-off-by: Niek Rossen <niek.rossen@infosupport.com>
---
 plugins/octopus-deploy/README.md | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/plugins/octopus-deploy/README.md b/plugins/octopus-deploy/README.md
index f6de7dc392..fabd3c4737 100644
--- a/plugins/octopus-deploy/README.md
+++ b/plugins/octopus-deploy/README.md
@@ -28,10 +28,11 @@ To use it, you will need to generate an [API Key](https://octopus.com/docs/octop
 ```
 // app-config.yaml
 proxy:
-  '/octopus-deploy':
-    target: 'https://<your-octopus-server-instance>/api'
-    headers:
-      X-Octopus-ApiKey: ${OCTOPUS_API_KEY}
+  endpoints:
+    '/octopus-deploy':
+      target: 'https://<your-octopus-server-instance>/api'
+      headers:
+        X-Octopus-ApiKey: ${OCTOPUS_API_KEY}
 ```
 
 Optionally, also add the following section to your app-config.yaml if you wish to enable linking to the Project Release page in the Octopus Deploy UI from the footer of the Backstage Release Table. Typically this will be the server URL above without the /api postfix.

From 2468e96d89022a5694c4e7ceda35ee026eadec1c Mon Sep 17 00:00:00 2001
From: Niek Rossen <niek.rossen@infosupport.com>
Date: Mon, 18 Mar 2024 15:17:37 +0100
Subject: [PATCH 04/12] Implement PR feedback

Signed-off-by: Niek Rossen <niek.rossen@infosupport.com>
---
 plugins/octopus-deploy/README.md                       |  6 +++---
 plugins/octopus-deploy/src/api/index.ts                |  8 ++++++--
 .../ScaffolderDropdown/ProjectGroupDropdown.tsx        | 10 ++++++++--
 plugins/octopus-deploy/src/hooks/useProjectGroups.ts   |  4 ++--
 4 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/plugins/octopus-deploy/README.md b/plugins/octopus-deploy/README.md
index fabd3c4737..745a1793e8 100644
--- a/plugins/octopus-deploy/README.md
+++ b/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.
 
diff --git a/plugins/octopus-deploy/src/api/index.ts b/plugins/octopus-deploy/src/api/index.ts
index 15451cd79f..dae508d172 100644
--- a/plugins/octopus-deploy/src/api/index.ts
+++ b/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`;
+  }
 }
diff --git a/plugins/octopus-deploy/src/components/ScaffolderDropdown/ProjectGroupDropdown.tsx b/plugins/octopus-deploy/src/components/ScaffolderDropdown/ProjectGroupDropdown.tsx
index 7d70bcd28e..410d07f15e 100644
--- a/plugins/octopus-deploy/src/components/ScaffolderDropdown/ProjectGroupDropdown.tsx
+++ b/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}
diff --git a/plugins/octopus-deploy/src/hooks/useProjectGroups.ts b/plugins/octopus-deploy/src/hooks/useProjectGroups.ts
index a4dce172c0..05365ce780 100644
--- a/plugins/octopus-deploy/src/hooks/useProjectGroups.ts
+++ b/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,
   };

From 4f996b3d94b6eefae0251d5eaf0bbe10474fe0db Mon Sep 17 00:00:00 2001
From: Niek Rossen <niek.rossen@infosupport.com>
Date: Mon, 18 Mar 2024 15:22:40 +0100
Subject: [PATCH 05/12] Refactor api

Signed-off-by: Niek Rossen <niek.rossen@infosupport.com>
---
 plugins/octopus-deploy/src/api/index.ts | 81 +++++++------------------
 1 file changed, 23 insertions(+), 58 deletions(-)

diff --git a/plugins/octopus-deploy/src/api/index.ts b/plugins/octopus-deploy/src/api/index.ts
index dae508d172..843f304015 100644
--- a/plugins/octopus-deploy/src/api/index.ts
+++ b/plugins/octopus-deploy/src/api/index.ts
@@ -117,74 +117,19 @@ export class OctopusDeployClient implements OctopusDeployApi {
     releaseHistoryCount: number;
   }): Promise<OctopusProgression> {
     const url = await this.getProgressionApiUrl(opts);
-
-    const response = await this.fetchApi.fetch(url);
-
-    let responseJson;
-
-    try {
-      responseJson = await response.json();
-    } catch (e) {
-      responseJson = { releases: [] };
-    }
-
-    if (response.status !== 200) {
-      throw new Error(
-        `Error communicating with Octopus Deploy: ${
-          responseJson?.error?.title || response.statusText
-        }`,
-      );
-    }
-
-    return responseJson;
+    return this.fetchAndHandleErrors(url);
   }
 
   async getProjectInfo(
     projectReference: ProjectReference,
   ): Promise<OctopusProject> {
     const url = await this.getProjectApiUrl(projectReference);
-    const response = await this.fetchApi.fetch(url);
-
-    let responseJson;
-
-    try {
-      responseJson = await response.json();
-    } catch (e) {
-      responseJson = { releases: [] };
-    }
-
-    if (response.status !== 200) {
-      throw new Error(
-        `Error communicating with Octopus Deploy: ${
-          responseJson?.error?.title || response.statusText
-        }`,
-      );
-    }
-
-    return responseJson;
+    return this.fetchAndHandleErrors(url);
   }
 
   async getProjectGroups(): Promise<OctopusProjectGroup[]> {
     const url = await this.getProjectGroupApiUrl();
-    const response = await this.fetchApi.fetch(url);
-
-    let responseJson;
-
-    try {
-      responseJson = await response.json();
-    } catch (e) {
-      responseJson = { releases: [] };
-    }
-
-    if (response.status !== 200) {
-      throw new Error(
-        `Error communicating with Octopus Deploy: ${
-          responseJson?.error?.title || response.statusText
-        }`,
-      );
-    }
-
-    return responseJson;
+    return this.fetchAndHandleErrors(url);
   }
 
   async getConfig(): Promise<OctopusPluginConfig> {
@@ -193,6 +138,26 @@ export class OctopusDeployClient implements OctopusDeployApi {
     };
   }
 
+  private async fetchAndHandleErrors<T>(url: string): Promise<T> {
+    const response = await this.fetchApi.fetch(url);
+
+    let responseJson: T;
+
+    try {
+      responseJson = await response.json();
+    } catch (e) {
+      throw new Error(`Failed to parse JSON response: ${e}`);
+    }
+
+    if (!response.ok) {
+      throw new Error(
+        `Error communicating with Octopus Deploy: ${response.status}`,
+      );
+    }
+
+    return responseJson;
+  }
+
   private async getProgressionApiUrl(opts: {
     projectReference: ProjectReference;
     releaseHistoryCount: number;

From a207927ffebb689f65632b15bdc94414a58f5c04 Mon Sep 17 00:00:00 2001
From: Niek Rossen <niek.rossen@infosupport.com>
Date: Mon, 18 Mar 2024 15:24:33 +0100
Subject: [PATCH 06/12] Added changeset

Signed-off-by: Niek Rossen <niek.rossen@infosupport.com>
---
 .changeset/unlucky-paws-greet.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/unlucky-paws-greet.md

diff --git a/.changeset/unlucky-paws-greet.md b/.changeset/unlucky-paws-greet.md
new file mode 100644
index 0000000000..a265ba9705
--- /dev/null
+++ b/.changeset/unlucky-paws-greet.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-octopus-deploy': minor
+---
+
+Added dropdown field extension for Octopus Deploy project groups

From 63b0606de1cd5ce1c2e75aee3931e8be2b3fd5b3 Mon Sep 17 00:00:00 2001
From: Niek Rossen <niek.rossen@infosupport.com>
Date: Tue, 19 Mar 2024 13:16:11 +0100
Subject: [PATCH 07/12] Refactor to ScaffolderField

Signed-off-by: Niek Rossen <niek.rossen@infosupport.com>
---
 .../ProjectGroupDropdown.tsx                  | 35 +++++++++----------
 .../components/ScaffolderDropdown/schema.ts   | 25 -------------
 plugins/octopus-deploy/src/plugin.ts          |  2 --
 3 files changed, 17 insertions(+), 45 deletions(-)
 delete mode 100644 plugins/octopus-deploy/src/components/ScaffolderDropdown/schema.ts

diff --git a/plugins/octopus-deploy/src/components/ScaffolderDropdown/ProjectGroupDropdown.tsx b/plugins/octopus-deploy/src/components/ScaffolderDropdown/ProjectGroupDropdown.tsx
index 410d07f15e..f0ad16b231 100644
--- a/plugins/octopus-deploy/src/components/ScaffolderDropdown/ProjectGroupDropdown.tsx
+++ b/plugins/octopus-deploy/src/components/ScaffolderDropdown/ProjectGroupDropdown.tsx
@@ -15,22 +15,21 @@
  */
 
 import React from 'react';
-import {
-  InputLabel,
-  Input,
-  FormControl,
-  FormHelperText,
-} from '@material-ui/core';
+import { InputLabel, Input } from '@material-ui/core';
 import { Select, SelectItem } from '@backstage/core-components';
 import { useProjectGroups } from '../../hooks/useProjectGroups';
-import { ProjectGroupDropdownProps } from './schema';
+import { ScaffolderField } from '@backstage/plugin-scaffolder-react/alpha';
+import { FieldExtensionComponentProps } from '@backstage/plugin-scaffolder-react';
 
 export const ProjectGroupDropdown = ({
   onChange,
+  errors,
   rawErrors,
   required,
-  formData,
-}: ProjectGroupDropdownProps) => {
+  help,
+  rawDescription,
+  disabled,
+}: FieldExtensionComponentProps<string>) => {
   const [selectedProjectGroup, setSelectedProjectGroup] =
     React.useState<string>('');
   const { projectGroups } = useProjectGroups();
@@ -45,10 +44,13 @@ export const ProjectGroupDropdown = ({
   };
 
   return (
-    <FormControl
-      margin="normal"
+    <ScaffolderField
+      rawErrors={rawErrors}
+      errors={errors}
       required={required}
-      error={rawErrors?.length > 0 && !formData}
+      help={help}
+      rawDescription={rawDescription}
+      disabled={disabled}
     >
       {projectGroups?.length ? (
         <Select
@@ -67,14 +69,11 @@ export const ProjectGroupDropdown = ({
           <InputLabel>Project Group</InputLabel>
           <Input
             id="project-group-input"
-            onChange={e => onChange(e.target.value)}
-            value={formData}
+            onChange={e => updateProjectGroup(e.target.value)}
+            value={selectedProjectGroup}
           />
         </>
       )}
-      <FormHelperText>
-        The project group of the within Octopus Deploy.
-      </FormHelperText>
-    </FormControl>
+    </ScaffolderField>
   );
 };
diff --git a/plugins/octopus-deploy/src/components/ScaffolderDropdown/schema.ts b/plugins/octopus-deploy/src/components/ScaffolderDropdown/schema.ts
deleted file mode 100644
index 651133bced..0000000000
--- a/plugins/octopus-deploy/src/components/ScaffolderDropdown/schema.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import z from 'zod';
-import { makeFieldSchemaFromZod } from '@backstage/plugin-scaffolder';
-
-const ProjectGroupDropdownFieldSchema = makeFieldSchemaFromZod(z.string());
-
-export const ProjectGroupDropdownSchema =
-  ProjectGroupDropdownFieldSchema.schema;
-
-export type ProjectGroupDropdownProps =
-  typeof ProjectGroupDropdownFieldSchema.type;
diff --git a/plugins/octopus-deploy/src/plugin.ts b/plugins/octopus-deploy/src/plugin.ts
index ac6f1e5981..3f1a4d9588 100644
--- a/plugins/octopus-deploy/src/plugin.ts
+++ b/plugins/octopus-deploy/src/plugin.ts
@@ -31,7 +31,6 @@ import { createScaffolderFieldExtension } from '@backstage/plugin-scaffolder-rea
 
 import { Entity } from '@backstage/catalog-model';
 import { ProjectGroupDropdown } from './components/ScaffolderDropdown';
-import { ProjectGroupDropdownSchema } from './components/ScaffolderDropdown/schema';
 
 /** @public */
 export const isOctopusDeployAvailable = (entity: Entity) =>
@@ -70,7 +69,6 @@ export const EntityOctopusDeployContent = octopusDeployPlugin.provide(
 export const OctopusDeployDropdownFieldExtension = octopusDeployPlugin.provide(
   createScaffolderFieldExtension({
     name: 'OctopusDeployProjectGroupDropdown',
-    schema: ProjectGroupDropdownSchema,
     component: ProjectGroupDropdown,
   }),
 );

From 8d8a5071e3f5942d04ffd68a6edeab3e2b79c2d7 Mon Sep 17 00:00:00 2001
From: blam <ben@blam.sh>
Date: Tue, 19 Mar 2024 13:25:39 +0100
Subject: [PATCH 08/12] chore: updating plugin imports to make build happy

Signed-off-by: blam <ben@blam.sh>
---
 .changeset/unlucky-paws-greet.md    | 2 +-
 plugins/octopus-deploy/package.json | 1 -
 yarn.lock                           | 1 -
 3 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/.changeset/unlucky-paws-greet.md b/.changeset/unlucky-paws-greet.md
index a265ba9705..92ace920e0 100644
--- a/.changeset/unlucky-paws-greet.md
+++ b/.changeset/unlucky-paws-greet.md
@@ -1,5 +1,5 @@
 ---
-'@backstage/plugin-octopus-deploy': minor
+'@backstage/plugin-octopus-deploy': patch
 ---
 
 Added dropdown field extension for Octopus Deploy project groups
diff --git a/plugins/octopus-deploy/package.json b/plugins/octopus-deploy/package.json
index 49488e6515..45ab57b8fc 100644
--- a/plugins/octopus-deploy/package.json
+++ b/plugins/octopus-deploy/package.json
@@ -37,7 +37,6 @@
     "@backstage/core-components": "workspace:^",
     "@backstage/core-plugin-api": "workspace:^",
     "@backstage/plugin-catalog-react": "workspace:^",
-    "@backstage/plugin-scaffolder": "workspace:^",
     "@backstage/plugin-scaffolder-react": "workspace:^",
     "@material-ui/core": "^4.9.13",
     "@types/react": "^16.13.1 || ^17.0.0 || ^18.0.0",
diff --git a/yarn.lock b/yarn.lock
index 56b2b7e617..88869b671a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7961,7 +7961,6 @@ __metadata:
     "@backstage/core-plugin-api": "workspace:^"
     "@backstage/dev-utils": "workspace:^"
     "@backstage/plugin-catalog-react": "workspace:^"
-    "@backstage/plugin-scaffolder": "workspace:^"
     "@backstage/plugin-scaffolder-react": "workspace:^"
     "@material-ui/core": ^4.9.13
     "@testing-library/dom": ^9.0.0

From 024bcebaa11f70a4effe2deafcc53b8e2e3752cd Mon Sep 17 00:00:00 2001
From: Niek Rossen <niek.rossen@infosupport.com>
Date: Tue, 19 Mar 2024 13:54:40 +0100
Subject: [PATCH 09/12] Remove unused package

Signed-off-by: Niek Rossen <niek.rossen@infosupport.com>
---
 plugins/octopus-deploy/package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/plugins/octopus-deploy/package.json b/plugins/octopus-deploy/package.json
index 45ab57b8fc..67aa6c5443 100644
--- a/plugins/octopus-deploy/package.json
+++ b/plugins/octopus-deploy/package.json
@@ -40,8 +40,7 @@
     "@backstage/plugin-scaffolder-react": "workspace:^",
     "@material-ui/core": "^4.9.13",
     "@types/react": "^16.13.1 || ^17.0.0 || ^18.0.0",
-    "react-use": "^17.2.4",
-    "zod": "^3.22.4"
+    "react-use": "^17.2.4"
   },
   "devDependencies": {
     "@backstage/cli": "workspace:^",

From 3115534d451097c0c045461f66e4d10477595f24 Mon Sep 17 00:00:00 2001
From: Niek Rossen <niek.rossen@infosupport.com>
Date: Tue, 19 Mar 2024 14:02:30 +0100
Subject: [PATCH 10/12] Remove zod dependency from yarn.lock

Signed-off-by: Niek Rossen <niek.rossen@infosupport.com>
---
 yarn.lock | 1 -
 1 file changed, 1 deletion(-)

diff --git a/yarn.lock b/yarn.lock
index 88869b671a..35e0098215 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7968,7 +7968,6 @@ __metadata:
     "@testing-library/react": ^14.0.0
     "@types/react": ^16.13.1 || ^17.0.0 || ^18.0.0
     react-use: ^17.2.4
-    zod: ^3.22.4
   peerDependencies:
     react: ^16.13.1 || ^17.0.0 || ^18.0.0
     react-dom: ^16.13.1 || ^17.0.0 || ^18.0.0

From 1daa1d3d664b150d1f3e9ae22674159b536f53c8 Mon Sep 17 00:00:00 2001
From: Niek Rossen <niek.rossen@infosupport.com>
Date: Tue, 19 Mar 2024 14:55:55 +0100
Subject: [PATCH 11/12] Updating api-report.md

Signed-off-by: Niek Rossen <niek.rossen@infosupport.com>
---
 plugins/octopus-deploy/api-report.md | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/plugins/octopus-deploy/api-report.md b/plugins/octopus-deploy/api-report.md
index 094cc0a7b0..c20f6486f0 100644
--- a/plugins/octopus-deploy/api-report.md
+++ b/plugins/octopus-deploy/api-report.md
@@ -11,6 +11,7 @@ import { ConfigApi } from '@backstage/core-plugin-api';
 import { DiscoveryApi } from '@backstage/core-plugin-api';
 import { Entity } from '@backstage/catalog-model';
 import { FetchApi } from '@backstage/core-plugin-api';
+import { FieldExtensionComponent } from '@backstage/plugin-scaffolder-react';
 import { JSX as JSX_2 } from 'react';
 
 // @public (undocumented)
@@ -29,6 +30,8 @@ export interface OctopusDeployApi {
   // (undocumented)
   getConfig(): Promise<OctopusPluginConfig>;
   // (undocumented)
+  getProjectGroups(): Promise<OctopusProjectGroup[]>;
+  // (undocumented)
   getProjectInfo(projectReference: ProjectReference): Promise<OctopusProject>;
   // (undocumented)
   getReleaseProgression(opts: {
@@ -51,6 +54,8 @@ export class OctopusDeployClient implements OctopusDeployApi {
   // (undocumented)
   getConfig(): Promise<OctopusPluginConfig>;
   // (undocumented)
+  getProjectGroups(): Promise<OctopusProjectGroup[]>;
+  // (undocumented)
   getProjectInfo(projectReference: ProjectReference): Promise<OctopusProject>;
   // (undocumented)
   getReleaseProgression(opts: {
@@ -59,13 +64,19 @@ export class OctopusDeployClient implements OctopusDeployApi {
   }): Promise<OctopusProgression>;
 }
 
+// @public (undocumented)
+export const OctopusDeployDropdownFieldExtension: FieldExtensionComponent<
+  string,
+  {}
+>;
+
 // @public (undocumented)
 export type OctopusDeployment = {
   State: string;
 };
 
 // @public (undocumented)
-export const octopusDeployPlugin: BackstagePlugin<{}, {}>;
+export const octopusDeployPlugin: BackstagePlugin<{}, {}, {}>;
 
 // @public (undocumented)
 export type OctopusEnvironment = {
@@ -97,6 +108,13 @@ export type OctopusProject = {
   Links: OctopusLinks;
 };
 
+// @public (undocumented)
+export type OctopusProjectGroup = {
+  Id: string;
+  Name: string;
+  Description: string;
+};
+
 // @public (undocumented)
 export type OctopusRelease = {
   Id: string;

From 2815f13776c4202afc2a7d926723168a1e8d7d97 Mon Sep 17 00:00:00 2001
From: blam <ben@blam.sh>
Date: Tue, 19 Mar 2024 15:20:31 +0100
Subject: [PATCH 12/12] chore: udpate api report

Signed-off-by: blam <ben@blam.sh>
---
 plugins/octopus-deploy/api-report.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/octopus-deploy/api-report.md b/plugins/octopus-deploy/api-report.md
index c20f6486f0..4a15bc1dfd 100644
--- a/plugins/octopus-deploy/api-report.md
+++ b/plugins/octopus-deploy/api-report.md
@@ -76,7 +76,7 @@ export type OctopusDeployment = {
 };
 
 // @public (undocumented)
-export const octopusDeployPlugin: BackstagePlugin<{}, {}, {}>;
+export const octopusDeployPlugin: BackstagePlugin<{}, {}>;
 
 // @public (undocumented)
 export type OctopusEnvironment = {