Refactor to ScaffolderField

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

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>
   );
 };

plugins/octopus-deploy/src/components/ScaffolderDropdown/schema.ts

@@ -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;

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,
   }),
 );