Feedback Plugin

Introduction

Feedback plugin is a valuable addition to backstage which allows project managers to get feedbacks for entites in Backstage Catalog.

It is dedicated to simplifying the process of gathering and managing user feedback for service catalog entities. This plugin seamlessly integrates with the feedback-backend-plugin and extends its capabilities by allowing users to create Jira tickets associated with their feedback.

Screenshots

| Global Page | Entity Page | | -------------------------------------------- | -------------------------------------------- | | | |

| Feedback Details Modal | Create Feedback Modal | | -------------------------------------------------- | --------------------------------------------- | | | |

| Opc Feedback Component | | | | | -------------------------------------------------- | ---------------------------------------------- | ---------------------------------------------------- | ---------------------------------------------- | | | | | |

Key Features

• List all the feedbacks and bugs for the componnets on global page.
• List all the feedbacks and bugs for each component on entity page.
• Create Bugs, Feedbacks directly on JIRA and also sends a mail to reporter.
• Unique feedback links for each feedback.
• Works with all knex supported databases.

Requirements

• Make sure that feedback-backend-plugin is configured prior to this.

Plugin Setup

1. Install the plugin in your environment

   yarn workspace app add @janus-idp/backstage-plugin-feedback

2. Add configuration to app-config.yml

   feedback:
     # A ref to base entity under which global feedbacks gets stored
     # in format: kind:namespace/name
     baseEntityRef: 'component:default/example-website'
   
     # Limit the number of characters for summary field
     # should be between 1-255
     summaryLimit: 240

3. Add GlobalFeedbackPage, OpcFeedbackComponent component to the src/App.tsx.

   import {
     feedbackPlugin,
     GlobalFeedbackPage,
     OpcFeedbackComponent,
   } from '@janus-idp/backstage-plugin-feedback';
   
   // ...
   const app = createApp({
     apis,
     bindRoutes({ bind }) {
       // ...
       // Bind techdocs root route to feedback plugin externalRoute.viewDocs to add "View Docs" link in opc-feedback component
       bind(feedbackPlugin.externalRoutes, {
         viewDocs: techdocsPlugin.routes.root,
       });
     },
     featureFlags: [
       // ...
     ],
   });
   const routes = (
     <FlatRoutes>
       // Insert this line to add feedback route
       <Route path="/feedback" element={<GlobalFeedbackPage />} />
     </FlatRoutes>
   );
   
   export default app.createRoot(
     <>
       // ...
       <AppRouter>
         // ...
         <OpcFeedbackComponent />
       </AppRouter>
     </>,
   );

4. Then add the feedback route to sidebar to easily access /feedback, in src/components/Root/Root.tsx.

   import TextsmsOutlined  from '@material-ui/icons/TextsmsOutlined';
   //...
   export const Root = ({ children }: PropsWithChildren<{}>) => (
     <SidebarPage>
       <Sidebar>
         // ...
         <SidebarGroup label="Menu" icon={<MenuIcon />}>
           // ...
           // Insert these lines in SidebarGroup
           <SidebarScrollWrapper>
             <SidebarItem icon={TextsmsOutlined} to="feedback" text="Feedback" />
           </SidebarScrollWrapper>
           // ...
         // ...
     </SidebarPage>
   )

5. Add EntityFeedbackPage component to the Component page, Api page in src/components/catalog/EntityPage.tsx.

   <EntityLayout.Route path="/feedback" title="Feedback">
     <EntityFeedbackPage />
   </EntityLayout.Route>

Annotations

To configure only mail:

• Add these annotations to your catalog-info.yaml file.

metadata:
  annotations:
    # Set to MAIL, if you want to recevie mail
    # on every feedback.
    feedback/type: 'MAIL'

    # Type in your mail here, it will be kept in cc,
    # while sending mail on feedback generation.
    feedback/email-to: '[email protected]'

To configure Jira + mail:

• Add these annotations to your catalog-info.yaml file.

metadata:
  annotations:
    # Set to JIRA to create ticket when
    # creating feedbacks.
    feedback/type: 'JIRA'

    # Enter your jira project key,
    jira/project-key: '<your-jira-project-key>'

    # (optional) Enter the url of you jira server.
    # If not set then it will use first host from app-config
    feedback/host: '<your-jira-host-url>'

    # (optional) Type in your mail here,
    #  it will be kept in cc,
    #  while sending mail on feedback generation.
    feedback/email-to: '[email protected]';

Credits

• @1-Platform for opc-feedback component.