Skip to main content

迁移到 react-jsonschema-form@v5

注意：如果您之前使用 /alpha 导入来测试 scaffolder/next 工作，这些导入已被提升为各软件包的默认导出。 您只需从导入路径中移除 /alpha，并从导入名称中移除 Next 即可。NextScaffolderPage -> ScaffolderPage，createNextScaffolderFieldExtension -> createScaffolderFieldExtension 等。

什么是 react-jsonschema-form?​

该库是 scaffolder 插件前端部分的核心，负责渲染开发人员和最终用户填写的表单，以满足jsonschema参数部分的要求。

自首次发布scaffolder插件，我们使用的是相当旧版本的react-jsonschema-form(我们刚刚更新这个库的问题是，新的 v5 版本有几处破坏性的更改，我们已经尽力避免将这些更改传递给我们的最终用户，用于他们的模板和自定义字段扩展.

我们希望通过复制第 3 版的react-jsonschema-form并使这些类型成为我们将支持的类型，即使底层库是 v5 版本，它也应该能让我们在不传递这些类型的情况下完成所有破坏性更改。

What's new?​

有鉴于此，此次发布的v5的react-jsonschema-form的所有新功能和错误修复。v4我们所期待的，其中一个主要的功能就是能够使用if / then / else语法中的template.yaml定义

我们还重建了验证在scaffolder组件的能力，这意味着我们已经开启了让async验证功能Field Extensions.

根据社区和内部的一些研究和反馈意见，部分页面的用户界面进行了小幅调整。

  • The TemplateList page has gotten some new Card components which show a little more information than the previous version with a little material-ui standards. * The WizardPage has received some new updates with the stepper now running horizontally, and the Review step being a dedicated step in the stepper. * The OngoingTask page now does not show the logs by default, and instead has a much cleaner interface for tracking the ongoing steps and the pipeline of actions that are currently showing. - You can also now provide your own OutputsComponent which can be used to render the outputs from an ongoing / completed task in a way that suits your templates the best. For instance, if your template produces Pull Requests, it could be useful to render these in an interactive way where you can see the statuses of each of these Pull Requests in the Ongoing Task page.

此外，我们还修复了许多错误和其他问题，但这些都是我们想要强调的主要问题。

如何升级​

随着v1.20.0我们希望这应该是非常透明的，一切都能按预期运行。 请通过以下方式联系我们discord或在问题如果您遇到问题，请联系我们。

如果您对任何一个@rjsf/*库，您需要手动将这些库提升到我们目前支持的版本：5.13.6不过，这里可能会有一些需要修改的地方，我们认为这些修改应该非常简单，比如从@rjsf/core至@rjsf/utils.

import { FieldValidation } from '@rjsf/core';
import { FieldValidation } from '@rjsf/utils;

逃生舱门​

如果由于某种原因升级到v1.20.0在下一个主线版本发布之前，我们会尽量修复所有问题，然后再删除遗留代码。

我们已将一些旧的出口产品移至/alpha导出，所以你应该可以切换到使用旧库，以防万一。

import { ScaffolderPage } from '@backstage/plugin-scaffolder';
import { LegacyScaffolderPage } from '@backstage/plugin-scaffolder/alpha';

这个 API 应该与之前的 Router 完全相同，所以你应该可以在这个文件的更下面做如下修改：

<Route
  path="/create"
  element={
    <ScaffolderPage
    <LegacyScaffolderPage
      groups={[
        {
          title: 'Recommended',
          filter: entity =>
            entity?.metadata?.tags?.includes('recommended') ?? false,
        },
      ]}
    />
  }
>
  <ScaffolderFieldExtensions>
    <LowerCaseValuePickerFieldExtension />
    {/* ... other extensions */}
  </ScaffolderFieldExtensions>
  <ScaffolderLayouts>
    <TwoColumnLayout />
    {/* ... other layouts */}
  </ScaffolderLayouts>
</Route>

您还可以更新您的CustomFieldExtensions像这样使用旧的助手：

import { createScaffolderFieldExtension } from '@backstage/plugin-scaffolder';
import { createLegacyScaffolderFieldExtension } from '@backstage/plugin-scaffolder-react/alpha';

export const EntityNamePickerFieldExtension = scaffolderPlugin.provide(
  createScaffolderFieldExtension({
  createLegacyScaffolderFieldExtension({
    component: EntityNamePicker,
    name: 'EntityNamePicker',
    validation: entityNamePickerValidation,
  }),
);

而在组件本身，你可能需要做以下工作：

import { FieldExtensionComponentProps } from '@backstage/plugin-scaffolder-react';
import { LegacyFieldExtensionComponentProps } from '@backstage/plugin-scaffolder-react/alpha';

export const EntityNamePicker = (
  props: FieldExtensionComponentProps<string, EntityNamePickerProps>,
  props: LegacyFieldExtensionComponentProps<string, EntityNamePickerProps>,
) => {
  const {
    onChange,
    required,
    schema: { title = 'Name', description = 'Unique name of the component' },
    rawErrors,
    formData,
    idSchema,
    placeholder,
  } = props;
  // ..
};