Tips Plugin

Welcome to the Tips plugin!

This plugin will show tips for entities. You can even extend the plugin with your own tips.

!Closed state
!Open state

Setup

1. Install this plugin:

``bash


From your Backstage root directory


yarn --cwd packages/app add @dweber019/backstage-plugin-tips
`

$3

Add the EntityTipsDialog to the EntityPage

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

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

const entityWarningContent = (
<>


























);
`

$3

You can add custom tips.

`tsx
// 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],
};
},
}),
];
`

A custom tip has to satisfy the following interface

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

The tip will be displayed on the entity page when activate evaluates to true.
The content of type string will be rendered with the builtin Backstage Markdown component.

You can have a look at plugins/tips/src/lib/systemModelTips.ts or plugins/tips/src/lib/extraTips.tsx` for some inspiration.