{"id":13574427,"url":"https://github.com/Parsifal-M/backstage-open-feedback","last_synced_at":"2025-04-04T15:30:59.448Z","repository":{"id":238150628,"uuid":"795536574","full_name":"Parsifal-M/backstage-open-feedback","owner":"Parsifal-M","description":"Feedback Plugin for Backstage","archived":false,"fork":false,"pushed_at":"2024-11-25T13:44:29.000Z","size":4574,"stargazers_count":16,"open_issues_count":4,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T14:42:30.219Z","etag":null,"topics":["backstage","backstage-plugin","feedfback","open-source","platform-engineering","plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Parsifal-M.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-03T13:47:34.000Z","updated_at":"2025-02-05T15:22:16.000Z","dependencies_parsed_at":"2024-06-02T17:14:24.508Z","dependency_job_id":"1af06304-3acf-4304-8b66-094ab6803276","html_url":"https://github.com/Parsifal-M/backstage-open-feedback","commit_stats":null,"previous_names":["parsifal-m/backstage-open-feedback"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Parsifal-M%2Fbackstage-open-feedback","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Parsifal-M%2Fbackstage-open-feedback/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Parsifal-M%2Fbackstage-open-feedback/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Parsifal-M%2Fbackstage-open-feedback/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Parsifal-M","download_url":"https://codeload.github.com/Parsifal-M/backstage-open-feedback/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247202618,"owners_count":20900818,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["backstage","backstage-plugin","feedfback","open-source","platform-engineering","plugin"],"created_at":"2024-08-01T15:00:51.523Z","updated_at":"2025-04-04T15:30:54.437Z","avatar_url":"https://github.com/Parsifal-M.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# OpenFeedback Plugin for Backstage\n\nHello! :wave:\n\nOpenFeedback is a plugin for [Backstage](https://backstage.io/) designed to simplify the process of collecting and managing feedback within your Backstage application, for your Backstage application. It's composed of several components, including a backend, frontend, and common utilities.\n\nLike what you see? Feel free to star this repository and share it with your friends! :star:\n\n## Key Features\n\n- **Feedback Collection**: OpenFeedback provides two interfaces for users to easily submit feedback, helping you gather valuable insights to improve your application.\n- **OpenFeedbackModal**: This component can be added to the sidebar and pops up a dialog box for users to send feedback. It can be easily integrated into your `packages/app/src/components/Root/Root.tsx` file.\n- **OpenFeedbackForm**: This is a form component that can be added to any page (More specifically designed for the [Backstage HomePage](https://backstage.io/docs/getting-started/homepage/#homepage)), providing a flexible way to collect feedback across your application.\n- **Feedback Management**: The `OpenFeedbackPage` component provides a comprehensive view of all collected feedback. This page uses the `FeedbackCards` component to display each piece of feedback. Administrators can view all feedback collected from users on this page, making it a central hub for feedback management.\n- **Integrated Solution**: OpenFeedback is built to integrate seamlessly with Backstage, allowing you to manage feedback directly within your Backstage application.\n\n## Screenshots\n\n### OpenFeedbackModal\n\nThis is the modal that pops up when the user clicks on the feedback button in the sidebar. It allows users to send feedback directly from the Backstage application as their logged in user or anonymously. It includes a location field to specify the page where the feedback was collected.\n\n![OpenFeedbackModal](./docs/img/of-modal.png)\n\n### OpenFeedbackPage\n\nThis is the page where all the feedback is displayed. It uses card components to display each piece of feedback. Administrators can view all feedback collected from users on this page, making it a central hub for feedback management. It will also display a \"location\" field to specify the page where the feedback was collected.\n\n![OpenFeedbackPage](./docs/img/of-feedbackpage.png)\n\n## Components\n\n- `backend`: This component, located in the `plugins/open-feedback-backend` directory, handles data processing and storage, ensuring that feedback data is securely stored and readily accessible.\n\n- `frontend`: This component, located in the `plugins/open-feedback` directory, provides the user interface for collecting and managing feedback. It includes the OpenFeedbackModal and OpenFeedbackForm components for flexible feedback collection.\n\n- `common`: This component, located in the `plugins/open-feedback-common` directory, contains shared types and permissions used by both the backend and frontend.\n\n## Installation\n\nRun the following yarn commands to add all the required packages to your Backstage application:\n\nFrom the root of your repository you can run the following commands:\n\n```bash\nyarn --cwd packages/app add @parsifal-m/backstage-plugin-open-feedback\n```\n\n```bash\nyarn --cwd packages/backend add @parsifal-m/backstage-plugin-open-feedback-backend\n```\n\n## Adding the OpenFeedback Backend to your Backstage Application\n\nTo add the OpenFeedback backend to your Backstage application, you need to add the following code to your `packages/backend/src/plugins/index.ts` file:\n\n```typescript\nimport { createBackend } from '@backstage/backend-defaults';\n\nconst backend = createBackend();\n\n// Other plugins\nbackend.add(import('@parsifal-m/backstage-plugin-open-feedback-backend'));\n\nbackend.start();\n```\n\n## Adding the OpenFeedback Frontend to your Backstage Application\n\nFirstly you will want to add the `OpenFeedbackPage` component to your `packages/app/src/App.tsx` file under the `routes`. This will add the feedback page to your Backstage application.\n\nIn the `OpenFeedbackPage` you will be able to see all the feedback that has been collected from users, and you will also have the option to delete feedback if needed.\n\n```typescript\nconst routes = (\n  \u003cFlatRoutes\u003e\n    // Other routes\n    \u003cRoute\n      path=\"/open-feedback\"\n      element={\n        \u003cOpenFeedbackPage\n          title=\"My Super Feedback Title!\" // Optional\n          subtitle=\"A Super Subtitle!\" // Optional\n        /\u003e\n      }\n    /\u003e\n  \u003c/FlatRoutes\u003e\n);\n```\n\n## Using the OpenFeedbackModal Component\n\nTo use the `OpenFeedbackModal` component, you will need to add it to your `packages/app/src/components/Root/Root.tsx` file. This will add the feedback modal to your Backstage application, personally I like to add it under the search button, or above/with the user settings button.\n\nClicking on it will open a dialog box for users to send feedback.\n\nIn the sidebar\n\n```typescript\nimport { OpenFeedbackModal } from '@parsifal-m/backstage-plugin-open-feedback';\n\n// Inside your Root component\n\u003cSidebar\u003e\n  \u003cSidebarLogo /\u003e\n  \u003cSidebarGroup label=\"Search\" icon={\u003cSearchIcon /\u003e} to=\"/search\"\u003e\n    \u003cSidebarSearchModal /\u003e\n    \u003cOpenFeedbackModal\n      floating // Setting this to true will make a floating button (FAB), setting it to false will make a sidebar item\n      title=\"Super Feedback!\" // Optional, defaults to \"Feedback\"\n      color=\"primary\" // Optional, defaults to \"primary\"\n      icon={FeedbackIcon} // Optional, defaults to the feedback icon\n      style={{ position: 'fixed', bottom: 20, right: 20, color: 'primary' }}\n    /\u003e;\n  \u003c/SidebarGroup\u003e\n\u003c/Sidebar\u003e;\n```\n\n## Using the OpenFeedbackForm Component\n\nI would recommend using the `OpenFeedbackForm` on the [Backstage HomePage](https://backstage.io/docs/getting-started/homepage/#homepage) to collect feedback from users. This component can be added to any page, but it is more specifically designed for the Backstage HomePage.\n\n## Contributing\n\nContributions are welcome! Feel free to pick up any open issues, or suggest new features by opening an issue!\n\nSome instructions on how to contribute can be found in the [CONTRIBUTING.md](./CONTRIBUTING.md) file.\n\nIf you have any questions you can also contact me on mastodon at [@parcifal](https://hachyderm.io/@parcifal).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FParsifal-M%2Fbackstage-open-feedback","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FParsifal-M%2Fbackstage-open-feedback","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FParsifal-M%2Fbackstage-open-feedback/lists"}