@digital-ai/plugin-scaffolder-frontend-module-deploy-app-field/README.md

Custom Field Extensions (Frontend Plugin)- List Deploy Application

# scaffolder-frontend-module-deploy-app-field

Welcome to the scaffolder-frontend-module-deploy-app-field plugin!

This plugin is a Custom Field Extension for Backstage. It allows you to add a set of drop-down lists to pick a Application already available in deploy.
It interacts with the configured Deploy Host to load the list of available Application from Deploy.

## Preview

![Deploy Application Selector Custom Field Extension Preview](img/DeployApplicationSelector.png)
## Installation

From your Backstage instance root folder:
```shell
yarn add --cwd packages/app @digital-ai/plugin-scaffolder-frontend-module-deploy-app-field
```

## Configuration

1. Add the import to your `packages/app/src/App.tsx` on the frontend package of your Backstage instance:

```js
// packages/app/src/App.tsx

import { DeployApplicationSelectorFieldExtension } from '@digital-ai/plugin-scaffolder-frontend-module-deploy-app-field';
import { ScaffolderFieldExtensions } from '@backstage/plugin-scaffolder-react';
```

2. Then add the imported field extension as a child of `ScaffolderFieldExtensions` inside `Route`, like so:

```js
// packages/app/src/App.tsx

<Route path="/create" element={<ScaffolderPage />}>
  <ScaffolderFieldExtensions>
    <DeployApplicationSelectorFieldExtension />
  </ScaffolderFieldExtensions>
</Route>
```

3. This custom field extension populates the dropdown list with applications from XL-Deploy, which is expected to be proxied by Backstage at the following path: `/deploy-app`. As such, you need to add the appropriate configuration to your `app-config.yaml` file under the `proxy.endpoints` field, like so:

```yaml
# app-config.yaml

proxy:
  /deploy-app:
    target: http://localhost:4516/
    changeOrigin: true
    headers:
      Authorization: Basic YWRtaW46YWRtaW4=
```

You should now see the custom field `DeployApplicationSelectorFieldExtension` and its dropdown lists populated if you navigate to the Template Editor page at http://localhost:3000/create/edit.

## Usage

To use the extension in a Backstage Software Template, you can add the `ui:field` field to the parameter. The output of the extension is an object made up of the following fields:
- `deployApplication`: the Application name selected by the user.

```yaml
  parameters:
    - title:  Select Deploy Application
      required:
        - deploy
      properties:
        deploy:
          type: object
          properties:
            deployApplication:
              type: string
          ui:field: DeployApplicationeSelectorExtension
          ui:autofocus: true
```