在Backstage中创建自定义表单组件

注意
本文档基于 Backstage 1.32.0 版本编写，并采用自 1.24.0 版本以来官方推荐使用的新后端系统（New BackEnd System）。Backstage 仍处于不断更新发展中，本文下述步骤可能将不适用于后续更新版本。

一、开发前准备

无。

二、编写自定义表单组件

接下来我们将以新建一个 Pod Namespace 环境选择器 为例，说明如何编写自定义表单组件。

（1）创建自定义表单组件的基本框架

在 packages/app/src 文件夹下新建文件夹 scaffolder
在 scaffolder 文件夹下继续创建新的文件夹 podSelector，这个文件夹中包含的就是本次示例的核心文件了
在 podSelector 文件夹下新建三个文件 extension.ts、index.ts、podEnvSelectExtension.tsx

其中 extension.ts 和 index.ts 文件负责将组件向外暴露，podEnvSelectExtension.tsx 文件中包含组件样式与处理逻辑。

（2）编写各个文件内容

packages/app/src/scaffolder/podSelector/extension.ts：

import { scaffolderPlugin } from '@backstage/plugin-scaffolder';
import { createScaffolderFieldExtension } from '@backstage/plugin-scaffolder-react';
import { PodSelector } from './podEnvSelectExtension';

export const PodEnvSelectorExtension = scaffolderPlugin.provide(
  createScaffolderFieldExtension({
    name: 'PodSelector',
    component: PodSelector,
  }),
);

packages/app/src/scaffolder/podSelector/index.ts：

1	export { PodEnvSelectorExtension } from './extensions';

packages/app/src/scaffolder/podSelector/podEnvSelectExtension.tsx：

import React from 'react';
import { FieldExtensionComponentProps } from '@backstage/plugin-scaffolder-react';
import { makeStyles } from '@material-ui/core/styles';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormHelperText from '@material-ui/core/FormHelperText';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';

const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  selectEmpty: {
    marginTop: theme.spacing(2),
  },
}));

export const PodSelector = ({
  onChange,
  rawErrors,
  required,
  formData,
}: FieldExtensionComponentProps<string>) => {
  const classes = useStyles();
  const [Kubernetes_Env, setEnv] = React.useState('');

  const handleChange = (event) => {
    setEnv(event.target.value);
  };

  return (
    <FormControl
      margin="normal"
      required={required}
      error={rawErrors?.length > 0 && !formData}
    >
      <InputLabel id="demo-simple-select-helper-label">Kubernetes Env</InputLabel>
      <Select
        labelId="demo-simple-select-helper-label"
        id="demo-simple-select-helper"
        value={Kubernetes_Env}
        onChange={handleChange}
      >
        <MenuItem value="">
          <em>None</em>
        </MenuItem>
        <MenuItem value={'dev'}>DEV</MenuItem>
        <MenuItem value={'uat'}>UAT</MenuItem>
        <MenuItem value={'prod'}>PROD</MenuItem>
      </Select>
      <FormHelperText>Choose the environment</FormHelperText>
    </FormControl>
  );
};

三、要点说明

自定义表单组件本质是 Scaffolder 的 Field Extension，通过 createScaffolderFieldExtension 注册，并给它一个 name
这个 name 就是软件模板 YAML 里 ui:field 要填的值，模板通过它把字段交给你的组件渲染
FieldExtensionComponentProps 提供了 onChange、formData、rawErrors、required 等属性，用于与表单状态同步并展示校验错误

Zave's Blog