提示插件

欢迎来到提示插件!

此插件将为实体显示提示 。 您甚至可以用自己的提示扩展插件 .

设置

1. 安装此插件 :

# From your Backstage root directory
yarn --cwd packages/app add @dweber019/backstage-plugin-tips

实体页

添加数据 EntityTipsDialog 切换到实体页

// packages/app/src/components/catalog/EntityPage.tsx

import { EntityTipsDialog } from '@dweber019/backstage-plugin-tips';

const entityWarningContent = (
  <>
    <EntitySwitch>
      <EntitySwitch.Case if={isOrphan}>
        <Grid item xs={12}>
          <EntityOrphanWarning />
        </Grid>
      </EntitySwitch.Case>
    </EntitySwitch>

    <EntitySwitch>
      <EntitySwitch.Case if={hasRelationWarnings}>
        <Grid item xs={12}>
          <EntityRelationWarning />
        </Grid>
      </EntitySwitch.Case>
    </EntitySwitch>

    <EntitySwitch>
      <EntitySwitch.Case if={hasCatalogProcessingErrors}>
        <Grid item xs={12}>
          <EntityProcessingErrorsPanel />
        </Grid>
      </EntitySwitch.Case>
    </EntitySwitch>

    <EntityTipsDialog />
  </>
);

自定义提示

您可以添加自定义提示 .

// packages/app/src/apis.tsx

import { tipsConfigRef, systemModelTips, extraTips } from '@dweber019/backstage-plugin-tips';
import { YourTip } from '...';

// ...

export const apis: AnyApiFactory[] = [
  // ...
  createApiFactory({
    api: tipsConfigRef,
    deps: {},
    factory: () => {
      return {
        tips: [...systemModelTips, ...extraTips, YourTip],
      };
    },
  }),
];

自定义提示必须满足以下接口

export interface Tip {
  content: string | React.ReactElement;
  title: string;
  activate: (options: { entity?: Entity }) => boolean;
}

当 activate 评估到 true。 。 。 .
这个 content 类型 string 将随后台内置 Markdown 组件.

你可以看一看 plugins/tips/src/lib/systemModelTips.ts 或者说 plugins/tips/src/lib/extraTips.tsx 对于一些灵感.