Welcome to the entity-feedback plugin!
This plugin allows you give and view feedback on entities available in the Backstage catalog.
The following sections will help you get the Entity Feedback plugin setup and running.
Note: this plugin requires authentication and identity configured so Backstage can identify which user has rated the entity. If you are using the guest identity provider which comes out of the box, this plugin will not work when you test it.
You need to setup the Entity Feedback backend plugin before you move forward with any of these steps if you haven't already
Install this plugin:
# From your Backstage root directory
yarn --cwd packages/app add @backstage/plugin-entity-feedbackAdd rating and feedback components to your EntityPage.tsx to hook up UI so that users
can rate your entities and for owners to view feedback/responses.
To allow users to apply "Like" and "Dislike" ratings add the following to each kind/type of
entity in your EntityPage.tsx you want to be rated (if you prefer to use star ratings, replace
EntityLikeDislikeRatingsCard with EntityStarredRatingsCard and LikeDislikeButtons with
StarredRatingButtons):
import {
...
+ InfoCard,
...
} from '@backstage/core-components';
+import {
+ EntityFeedbackResponseContent,
+ EntityLikeDislikeRatingsCard,
+ LikeDislikeButtons,
+} from '@backstage/plugin-entity-feedback';
// Add to each applicable kind/type of entity as desired
const overviewContent = (
<Grid container spacing={3} alignItems="stretch">
...
+ <Grid item md={2}>
+ <InfoCard title="Rate this entity">
+ <LikeDislikeButtons />
+ </InfoCard>
+ </Grid>
...
</Grid>
);
...
// Add to each applicable kind/type of entity as desired
const serviceEntityPage = (
<EntityLayoutWrapper>
...
+ <EntityLayout.Route path="/feedback" title="Feedback">
+ <EntityFeedbackResponseContent />
+ </EntityLayout.Route>
...
</EntityLayoutWrapper>
);
...
// Add ratings card component to user/group entities to view ratings of owned entities
const userPage = (
<EntityLayoutWrapper>
<EntityLayout.Route path="/" title="Overview">
<Grid container spacing={3}>
...
+ <Grid item xs={12}>
+ <EntityLikeDislikeRatingsCard />
+ </Grid>
...
</Grid>
</Grid>
</EntityLayout.Route>
</EntityLayoutWrapper>
);
const groupPage = (
<EntityLayoutWrapper>
<EntityLayout.Route path="/" title="Overview">
<Grid container spacing={3}>
...
+ <Grid item xs={12}>
+ <EntityLikeDislikeRatingsCard />
+ </Grid>
...
</Grid>
</Grid>
</EntityLayout.Route>
</EntityLayoutWrapper>
);Note: For a full example of this you can look at this EntityPage.