diff --git a/ADOPTERS.md b/ADOPTERS.md index 1a4913be17..f96cc08e18 100644 --- a/ADOPTERS.md +++ b/ADOPTERS.md @@ -1,60 +1,60 @@ -| Organization | Contact | Description of Use | -| ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Spotify](https://www.spotify.com) | [@leemills83](https://github.com/leemills83) | Main interface towards all of Spotify's infrastructure and technical documentation. | -| [bol.com](https://www.bol.com) | [@sagacity](https://github.com/sagacity) | Initial work being done to unify platform tooling. | -| [DFDS](https://www.dfds.com) | [@carlsendk](https://github.com/carlsendk) | V2 self-service platform. | -| [Roadie](https://roadie.io) | [@dtuite](https://github.com/dtuite) | Hosted, managed Backstage with easy set-up | -| [Roku](https://www.roku.com) | [@timurista](https://github.com/timurista) | Initial work on Cloud engineering service platform. | -| [SDA SE](https://sda.se) | [@Fox32](https://github.com/Fox32) | Central place for developing and sharing services in our insurance ecosystem. | -| [H-E-B](https://www.heb.com) | [@german-j-rodriguez](https://github.com/german-j-rodriguez) | Initial work on Engineering Portal service platform. | -| [American Airlines](https://www.aa.com) | [@paulpach](https://github.com/paulpach) | Central place for developers to develop and maintain applications | -| [Kiwi.com](https://kiwi.com) | [@aexvir](https://github.com/aexvir) | Replacing the frontend of [The Zoo](https://github.com/kiwicom/the-zoo), their service registry. | -| [Voi](https://www.voiscooters.com/) | [@K-Phoen](https://github.com/K-Phoen) | Developer portal, main gateway to our infrastructure, documentation and internal tooling. | -| [Talkdesk](https://www.talkdesk.com) | [@jaime-talkdesk](https://github.com/jaime-talkdesk) | Initial work for Engineering Portal and Self Provisioning to R&D | -| [Wealthsimple](https://www.wealthsimple.com) | [@andrewthauer](https://github.com/andrewthauer) | Developer portal, service catalog, documentation and tooling | -| [Grab](https://www.grab.com) | [@althafh](https://github.com/althafh) | Initial work as a unified interface for all of Grab's internal tooling | -| [Telenor Sweden](https://www.telenor.se) | [@O5ten](https://github.com/O5ten) | Building a developer portal for scaffolding projects towards our unified build environment and microservice stacks | -| [Fiverr](https://www.fiverr.com) | [@nirga](https://github.com/nirga) | Unifying separate tools that developers are using today (i.e. monitoring, dead letter queues management, etc.) into a single platform. | -| [Zalando SE](https://www.zalando.de) | [@leviferreira](https://github.com/leviferreira) | Building V2 of the Internal Development Portal. | -| [LegalZoom](https://legalzoom.com) | [@backjo](https://github.com/backjo) | Developer portal - hub for all engineering projects and metadata. | -| [Expedia Group](https://www.expediagroup.com) | [Mike Turner](mailto:miturner@expediagroup.com), [Sneha Kumar](mailto:snkumar@expediagroup.com), [@guillermomanzo](https://github.com/guillermomanzo), [Erik Lindgren](https://github.com/lindgren) | EG Common Developer Toolkit | -| [Paddle.com](https://paddle.com) | [Ioannis Georgoulas](https://github.com/geototti21) | Developer portal (Tech Docs, Service Catalog, Internal Tooling), we use vanilla Backstage FE and custom BE implementation in Go | -| [Acast.com](https://acast.com) | [Olle Lundberg](https://github.com/lndbrg) | Developer portal with tech docs, service catalog and a bunch of other internal tooling | -| [Lunar](https://lunar.app) | [Jacob Valdemar](https://github.com/JacobValdemar) | Internal developer portal for service overview and insights, API documentation, technical guides, onboarding guides and RFC's. | -| [Trendyol](https://trendyol.com) | [Gamze Senturk](https://github.com/gmzsenturk), [Mert Can Bilgic](https://github.com/mertcb) | The Developer Portal has been called `Pandora`. Provides an overview of Trendyol tech ecosystem. TechDocs, Catalog, Custom Plugins and Theme. | -| [Peloton](https://www.onepeloton.com/) | [Jim Haughwout](https://github.com/JimHaughwout) | Creating our first developer portal and tech-docs. Exploring Service Catalog, Tech Insights and Cost Insights as well. | -| [TELUS](https://telus.com) | [Seb Barre](https://github.com/sbarre) | The Go-to place to find answers about development and delivery at TELUS. | -| [Brex](https://www.brex.com/) | [Vamsi Chitters](https://github.com/vamsikc) | A centralized UI to understand how a service fits in the whole Brex architecture and manage a teamโ€™s engineering dependencies. | -| [Oriflame](https://www.oriflame.com/) | [Oriflame](https://github.com/oriflame) | Internal developer portal for services, single page apps and packages overview, API documentation, technical guides, tech-radar and more. | -| [Booz Allen Hamilton](https://www.boozallen.com/) | [Jason Miller](https://github.com/JasonMiller-BAH) | Developer portal for a full-stack software development ecosystem that accelerates consistent and repeatable Modern Software Development practices for internal innovation and investments. | -| [Netflix](https://www.netflix.com/) | [bleathem](https://github.com/bleathem) | Our Backstage implementation will be the front door to a unified experience connecting our internal platform products across important workflows with integrated knowledge and support. | -| [b.well](https://www.icanbwell.com/) | [Jacob Rosales](https://github.com/jrosales) | Foundation for our engineering portal and cloud insights. | -| [PagerDuty](https://www.pagerduty.com/) | [Mark Shaw](https://github.com/markshawtoronto) | Developer portal, initially focused on software templates and tech-docs. | -| [MoonShiner](https://moonshiner.at) | [Fabian Hippmann](https://github.com/FabianHippmann) | Developer portal - helps us keep track of our customer projects, onboard new developers & improve our development process ๐ŸŒ•๐Ÿš€๐Ÿง‘โ€๐Ÿš€ | -| [FundApps](https://www.fundapps.co/) | [Elliot Greenwood](https://github.com/egnwd) | Developer Portal - A place for us to keep track of our projects and documentation for all services and processes | -| [DAZN](https://dazn.com/) | [Lou Bichard](https://twitter.com/loujaybee), [Marco Crivellaro](https://github.com/crivetechie), [Alex Hollerith](mailto:alex.hollerith@dazn.com) | Ingesting all of DAZN's repos for the catalog, migrating our internal platform apps (pull request boards, release information, inner source marketplace etc) to Backstage plugins (where applicable). | -| [HelloFresh](https://www.hellofresh.de/) | [@iammuho](https://github.com/iammuho), [@ElenaForester](https://github.com/ElenaForester), [@diegomarangoni](https://github.com/diegomarangoni) | Our developer portal at HelloFresh - Spread across an organisation of 500+ engineers globally. | -| [FactSet](https://www.factset.com/) | [@kuangp](https://github.com/kuangp) | Developer portal to provide discoverability to all internal components, APIs, documentation, and scaffold templates with integrations to our internal infrastructure tools. | -| [Workrise](https://www.workrise.com/) | [Michael Rode](https://github.com/michaelrode) | Developer portal, main gateway to our infrastructure, documentation and internal tooling. | -| [RedVentures](https://www.redventures.com/) | [Chris Diaz](https://github.com/codingdiaz) | Developer portal that brings everything an engineer needs to provide value into a single pane of glass. | -| [MavTek](https://www.mavtek.com/) | [@fgascon](https://github.com/fgascon) | Developer portal focused on standardizing practices, centralizing documentation and streamlining developer practices. | -| [QuintoAndar](https://www.quintoandar.com.br/) | [@quintoandar](https://github.com/quintoandar) | Developer portal, services catalog and centralization of service metrics. | -| [empathy.co](https://empathy.co/) | [@guillermotti](https://github.com/guillermotti) | Developer portal for tech docs, service catalog, plugin discovery and much more. | -| [creditas.com](https://creditas.com/) | [@aureliosaraiva](https://github.com/aureliosaraiva) [@Creditas](https://github.com/creditas) | Centralization of all services, standards, documentation, etc. We started the deployment process. | -| [Prisjakt](https://www.prisjakt.nu) / [PriceSpy](https://pricespy.co.uk) | [@kennylindahl](https://github.com/kennylindahl) | Internal developer portal - Documentation, scaffolding, software catalog, TechRadar, Gitlab org data integration | -| [Powerspike](https://powerspike.tv/) | [@trelore](https://github.com/trelore) | Developer portal for documentation of core libraries and repositories. | -| [2U](https://2u.com) | [Andrew Thal](https://github.com/athal7) | Development team home-base, promoting service discoverability, resource dependencies, and tech radar | -| [Taxfix](https://taxfix.de/) | [Sami Ur Rehman](https://github.com/samiurrehman92) | Developer's portal with software catalog at it's core. Hosts API Specs, Tech Docs, Tech Radar and some custom plugins. | -| [Busuu](https://busuu.com/) | [Adam Tester](https://github.com/adamtester) | Developer portal with service catalog, API docs, Event docs, service templating, and cost insights. | -| [Loadsmart](https://loadsmart.com/) | [Loadsmart](https://github.com/loadsmart) | Improve services visibility and operations for service owners and developers. | -| [Monzo](https://monzo.com/) | [@WillSewell](https://github.com/WillSewell), [@joechrisellis](https://github.com/joechrisellis) | Developer portal showing metadata and docs for over 2000 microservices. We have built a number of plugins such as a UI for our system to measure [software excellence](https://monzo.com/blog/2021/09/15/how-we-measure-software-excellence), and a UI to show deployment and config change events. | -| [Vaimo](https://www.vaimo.com) | [@vaimo-magnus](https://github.com/vaimo-magnus) | Developer Portal for our developers at Vaimo, currently docs and self-service towards our internal PaaS based on k8s. Plans to extend the catalog into Projects, Environments etc | -| [Wayfair](https://www.wayfair.com) | [@fransan](https://github.com/fransan), [@errskipower](https://github.com/errskipower), [@hrrs](https://github.com/hrrs) | Developer portal for service catalog, technical documentation, and APIs. | -| [CircleHD](https://www.circlehd.com) | [@circlehddev](https://github.com/circlehddev) | Developer Portal for internal dev team across the globe | -| [CastDesk](https://castdesk.com) | [@circlehddev](https://github.com/circlehddev) | Developer Portal for internal dev team across the globe | -| [Santagostino](https://santagostino.it) | [@santagostino](https://github.com/santagostino) | Developer portal, gateway to our infrastructure, documentation, service catalog and internal tooling. | -| [Peak](https://peak.ai) | [Luke Beamish](https://github.com/lukebeamish-peak) | Developer portal for all internal engineers to access documentation and tooling. | -| [Gelato](https://gelato.com/) | [Dmitry Makarenko](https://github.com/dmitry-makarenko-gelato) | Developer portal: documentation, service templates, org structure, service catalog, plugins for integration with internal and third-party systems๐Ÿš€. | -| [GoCardless](https://gocardless.com/) | [James Turley](https://github.com/tragiclifestories) | Developer portal: documentation, service templates, org structure, service catalog, plugins for integration with internal systems. | -| [Box](https://www.box.com) | [@kielosz](https://github.com/kielosz), [@jluk-box](https://github.com/jluk-box), [@ptychu](https://github.com/ptychu), [@alexrybch](https://github.com/alexrybch), [@szubster](https://github.com/szubster) | Developer portal for service catalog, integration with internal systems, new service onboarding. | -| [Bazaarvoice](https://www.bazaarvoice.com) | [@niallmccullagh](https://github.com/niallmccullagh) | Developer portal for service catalog and scaffolds, publishing Github docs and API documentation, visualising our internal tech radar and our product engineering org structure. | +| Organization | Contact | Description of Use | +| ------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [Spotify](https://www.spotify.com) | [@leemills83](https://github.com/leemills83) | Main interface towards all of Spotify's infrastructure and technical documentation. | +| [bol.com](https://www.bol.com) | [@sagacity](https://github.com/sagacity) | Initial work being done to unify platform tooling. | +| [DFDS](https://www.dfds.com) | [@carlsendk](https://github.com/carlsendk) | V2 self-service platform. | +| [Roadie](https://roadie.io) | [@dtuite](https://github.com/dtuite) | Hosted, managed Backstage with easy set-up | +| [Roku](https://www.roku.com) | [@timurista](https://github.com/timurista) | Initial work on Cloud engineering service platform. | +| [SDA SE](https://sda.se) | [@Fox32](https://github.com/Fox32) | Central place for developing and sharing services in our insurance ecosystem. | +| [H-E-B](https://www.heb.com) | [@german-j-rodriguez](https://github.com/german-j-rodriguez) | Initial work on Engineering Portal service platform. | +| [American Airlines](https://www.aa.com) | [@paulpach](https://github.com/paulpach) | Central place for developers to develop and maintain applications | +| [Kiwi.com](https://kiwi.com) | [@aexvir](https://github.com/aexvir) | Replacing the frontend of [The Zoo](https://github.com/kiwicom/the-zoo), their service registry. | +| [Voi](https://www.voiscooters.com/) | [@K-Phoen](https://github.com/K-Phoen) | Developer portal, main gateway to our infrastructure, documentation and internal tooling. | +| [Talkdesk](https://www.talkdesk.com) | [@jaime-talkdesk](https://github.com/jaime-talkdesk) | Initial work for Engineering Portal and Self Provisioning to R&D | +| [Wealthsimple](https://www.wealthsimple.com) | [@andrewthauer](https://github.com/andrewthauer) | Developer portal, service catalog, documentation and tooling | +| [Grab](https://www.grab.com) | [@althafh](https://github.com/althafh) | Initial work as a unified interface for all of Grab's internal tooling | +| [Telenor Sweden](https://www.telenor.se) | [@O5ten](https://github.com/O5ten) | Building a developer portal for scaffolding projects towards our unified build environment and microservice stacks | +| [Fiverr](https://www.fiverr.com) | [@nirga](https://github.com/nirga) | Unifying separate tools that developers are using today (i.e. monitoring, dead letter queues management, etc.) into a single platform. | +| [Zalando SE](https://www.zalando.de) | [@leviferreira](https://github.com/leviferreira) | Building V2 of the Internal Development Portal. | +| [LegalZoom](https://legalzoom.com) | [@backjo](https://github.com/backjo) | Developer portal - hub for all engineering projects and metadata. | +| [Expedia Group](https://www.expediagroup.com) | [Mike Turner](mailto:miturner@expediagroup.com), [Sneha Kumar](mailto:snkumar@expediagroup.com), [@guillermomanzo](https://github.com/guillermomanzo), [Erik Lindgren](https://github.com/lindgren) | EG Common Developer Toolkit | +| [Paddle.com](https://paddle.com) | [Ioannis Georgoulas](https://github.com/geototti21) | Developer portal (Tech Docs, Service Catalog, Internal Tooling), we use vanilla Backstage FE and custom BE implementation in Go | +| [Acast.com](https://acast.com) | [Olle Lundberg](https://github.com/lndbrg) | Developer portal with tech docs, service catalog and a bunch of other internal tooling | +| [Lunar](https://lunar.app) | [Jacob Valdemar](https://github.com/JacobValdemar) | Internal developer portal for service overview and insights, API documentation, technical guides, onboarding guides and RFC's. | +| [Trendyol](https://trendyol.com) | [Gamze Senturk](https://github.com/gmzsenturk), [Mert Can Bilgic](https://github.com/mertcb) | The Developer Portal has been called `Pandora`. Provides an overview of Trendyol tech ecosystem. TechDocs, Catalog, Custom Plugins and Theme. | +| [Peloton](https://www.onepeloton.com/) | [Jim Haughwout](https://github.com/JimHaughwout) | Creating our first developer portal and tech-docs. Exploring Service Catalog, Tech Insights and Cost Insights as well. | +| [TELUS](https://telus.com) | [Seb Barre](https://github.com/sbarre) | The Go-to place to find answers about development and delivery at TELUS. | +| [Brex](https://www.brex.com/) | [Vamsi Chitters](https://github.com/vamsikc) | A centralized UI to understand how a service fits in the whole Brex architecture and manage a teamโ€™s engineering dependencies. | +| [Oriflame](https://www.oriflame.com/) | [Oriflame](https://github.com/oriflame) | Internal developer portal for services, single page apps and packages overview, API documentation, technical guides, tech-radar and more. | +| [Booz Allen Hamilton](https://www.boozallen.com/) | [Jason Miller](https://github.com/JasonMiller-BAH) | Developer portal for a full-stack software development ecosystem that accelerates consistent and repeatable Modern Software Development practices for internal innovation and investments. | +| [Netflix](https://www.netflix.com/) | [bleathem](https://github.com/bleathem) | Our Backstage implementation will be the front door to a unified experience connecting our internal platform products across important workflows with integrated knowledge and support. | +| [b.well](https://www.icanbwell.com/) | [Jacob Rosales](https://github.com/jrosales) | Foundation for our engineering portal and cloud insights. | +| [PagerDuty](https://www.pagerduty.com/) | [Mark Shaw](https://github.com/markshawtoronto) | Developer portal, initially focused on software templates and tech-docs. | +| [MoonShiner](https://moonshiner.at) | [Fabian Hippmann](https://github.com/FabianHippmann) | Developer portal - helps us keep track of our customer projects, onboard new developers & improve our development process ๐ŸŒ•๐Ÿš€๐Ÿง‘โ€๐Ÿš€ | +| [FundApps](https://www.fundapps.co/) | [Elliot Greenwood](https://github.com/egnwd) | Developer Portal - A place for us to keep track of our projects and documentation for all services and processes | +| [DAZN](https://dazn.com/) | [Lou Bichard](https://twitter.com/loujaybee), [Marco Crivellaro](https://github.com/crivetechie), [Alex Hollerith](mailto:alex.hollerith@dazn.com) | Ingesting all of DAZN's repos for the catalog, migrating our internal platform apps (pull request boards, release information, inner source marketplace etc) to Backstage plugins (where applicable). | +| [HelloFresh](https://www.hellofresh.de/) | [@iammuho](https://github.com/iammuho), [@ElenaForester](https://github.com/ElenaForester), [@diegomarangoni](https://github.com/diegomarangoni) | Our developer portal at HelloFresh - Spread across an organisation of 500+ engineers globally. | +| [FactSet](https://www.factset.com/) | [@kuangp](https://github.com/kuangp) | Developer portal to provide discoverability to all internal components, APIs, documentation, and scaffold templates with integrations to our internal infrastructure tools. | +| [Workrise](https://www.workrise.com/) | [Michael Rode](https://github.com/michaelrode) | Developer portal, main gateway to our infrastructure, documentation and internal tooling. | +| [RedVentures](https://www.redventures.com/) | [Chris Diaz](https://github.com/codingdiaz) | Developer portal that brings everything an engineer needs to provide value into a single pane of glass. | +| [MavTek](https://www.mavtek.com/) | [@fgascon](https://github.com/fgascon) | Developer portal focused on standardizing practices, centralizing documentation and streamlining developer practices. | +| [QuintoAndar](https://www.quintoandar.com.br/) | [@quintoandar](https://github.com/quintoandar) | Developer portal, services catalog and centralization of service metrics. | +| [empathy.co](https://empathy.co/) | [@guillermotti](https://github.com/guillermotti) | Developer portal for tech docs, service catalog, plugin discovery and much more. | +| [creditas.com](https://creditas.com/) | [@aureliosaraiva](https://github.com/aureliosaraiva) [@Creditas](https://github.com/creditas) | Centralization of all services, standards, documentation, etc. We started the deployment process. | +| [Prisjakt](https://www.prisjakt.nu) / [PriceSpy](https://pricespy.co.uk) | [@kennylindahl](https://github.com/kennylindahl) | Internal developer portal - Documentation, scaffolding, software catalog, TechRadar, Gitlab org data integration | +| [Powerspike](https://powerspike.tv/) | [@trelore](https://github.com/trelore) | Developer portal for documentation of core libraries and repositories. | +| [2U](https://2u.com) | [Andrew Thal](https://github.com/athal7) | Development team home-base, promoting service discoverability, resource dependencies, and tech radar | +| [Taxfix](https://taxfix.de/) | [Sami Ur Rehman](https://github.com/samiurrehman92) | Developer's portal with software catalog at it's core. Hosts API Specs, Tech Docs, Tech Radar and some custom plugins. | +| [Busuu](https://busuu.com/) | [Adam Tester](https://github.com/adamtester) | Developer portal with service catalog, API docs, Event docs, service templating, and cost insights. | +| [Loadsmart](https://loadsmart.com/) | [Loadsmart](https://github.com/loadsmart) | Improve services visibility and operations for service owners and developers. | +| [Monzo](https://monzo.com/) | [@WillSewell](https://github.com/WillSewell), [@joechrisellis](https://github.com/joechrisellis) | Developer portal showing metadata and docs for over 2000 microservices. We have built a number of plugins such as a UI for our system to measure [software excellence](https://monzo.com/blog/2021/09/15/how-we-measure-software-excellence), and a UI to show deployment and config change events. | +| [Vaimo](https://www.vaimo.com) | [@vaimo-magnus](https://github.com/vaimo-magnus) | Developer Portal for our developers at Vaimo, currently docs and self-service towards our internal PaaS based on k8s. Plans to extend the catalog into Projects, Environments etc | +| [Wayfair](https://www.wayfair.com) | [@fransan](https://github.com/fransan), [@errskipower](https://github.com/errskipower), [@hrrs](https://github.com/hrrs) | Developer portal for service catalog, technical documentation, and APIs. | +| [CircleHD](https://www.circlehd.com) | [@circlehddev](https://github.com/circlehddev) | Developer Portal for internal dev team across the globe | +| [CastDesk](https://castdesk.com) | [@circlehddev](https://github.com/circlehddev) | Developer Portal for internal dev team across the globe | +| [Santagostino](https://santagostino.it) | [@santagostino](https://github.com/santagostino) | Developer portal, gateway to our infrastructure, documentation, service catalog and internal tooling. | +| [Peak](https://peak.ai) | [Luke Beamish](https://github.com/lukebeamish-peak) | Developer portal for all internal engineers to access documentation and tooling. | +| [Gelato](https://gelato.com/) | [Dmitry Makarenko](https://github.com/dmitry-makarenko-gelato) | Developer portal: documentation, service templates, org structure, service catalog, plugins for integration with internal and third-party systems๐Ÿš€. | +| [GoCardless](https://gocardless.com/) | [James Turley](https://github.com/tragiclifestories) | Developer portal: documentation, service templates, org structure, service catalog, plugins for integration with internal systems. | +| [Box](https://www.box.com) | [@kielosz](https://github.com/kielosz), [@jluk-box](https://github.com/jluk-box), [@ptychu](https://github.com/ptychu), [@alexrybch](https://github.com/alexrybch), [@szubster](https://github.com/szubster) | Developer portal for service catalog, integration with internal systems, new service onboarding. | +| [Bazaarvoice](https://www.bazaarvoice.com) | [@niallmccullagh](https://github.com/niallmccullagh) | Developer portal for service catalog and scaffolds, publishing Github docs and API documentation, visualising our internal tech radar and our product engineering org structure. | diff --git a/plugins/bazaar-backend/.eslintrc.js b/plugins/bazaar-backend/.eslintrc.js new file mode 100644 index 0000000000..16a033dbc6 --- /dev/null +++ b/plugins/bazaar-backend/.eslintrc.js @@ -0,0 +1,3 @@ +module.exports = { + extends: [require.resolve('@backstage/cli/config/eslint.backend')], +}; diff --git a/plugins/bazaar-backend/README.md b/plugins/bazaar-backend/README.md new file mode 100644 index 0000000000..82c1376d8b --- /dev/null +++ b/plugins/bazaar-backend/README.md @@ -0,0 +1,49 @@ +# Bazaar Backend + +Welcome to the Bazaar backend plugin! + +# Installation + +## Install the package + +```bash +# From your Backstage root directory +cd packages/backend +yarn add @backstage/plugin-bazaar-backend +``` + +## Adding the plugin to your `packages/backend` + +You'll need to add the plugin to the router in your `backend` package. You can do this by creating a file called `packages/backend/src/plugins/bazaar.ts` + +```tsx +import { PluginEnvironment } from '../types'; +import { createRouter } from '@backstage/plugin-bazaar-backend'; + +export default async function createPlugin({ + logger, + database, + config, +}: PluginEnvironment) { + return await createRouter({ logger, config, database }); +} +``` + +With the `bazaar.ts` router setup in place, add the router to `packages/backend/src/index.ts`: + +```diff ++ import bazaar from './plugins/bazaar'; + +async function main() { + ... + const createEnv = makeCreateEnv(config); + + const catalogEnv = useHotMemoize(module, () => createEnv('catalog')); ++ const bazaarEnv = useHotMemoize(module, () => createEnv('bazaar')); + + const apiRouter = Router(); ++ apiRouter.use('/bazaar', await bazaar(bazaarEnv)); + ... + apiRouter.use(notFoundHandler()); + +``` diff --git a/plugins/bazaar-backend/api-report.md b/plugins/bazaar-backend/api-report.md new file mode 100644 index 0000000000..89f6da5305 --- /dev/null +++ b/plugins/bazaar-backend/api-report.md @@ -0,0 +1,29 @@ +## API Report File for "@backstage/plugin-bazaar-backend" + +> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). + +```ts +import { Config } from '@backstage/config'; +import express from 'express'; +import { Logger as Logger_2 } from 'winston'; +import { PluginDatabaseManager } from '@backstage/backend-common'; + +// Warning: (ae-missing-release-tag) "createRouter" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// +// @public (undocumented) +export function createRouter(options: RouterOptions): Promise; + +// Warning: (ae-missing-release-tag) "RouterOptions" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// +// @public (undocumented) +export interface RouterOptions { + // (undocumented) + config: Config; + // (undocumented) + database: PluginDatabaseManager; + // (undocumented) + logger: Logger_2; +} + +// (No @packageDocumentation comment for this package) +``` diff --git a/plugins/bazaar-backend/migrations/20211014144054_init.js b/plugins/bazaar-backend/migrations/20211014144054_init.js new file mode 100644 index 0000000000..5bf66698ac --- /dev/null +++ b/plugins/bazaar-backend/migrations/20211014144054_init.js @@ -0,0 +1,65 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +exports.up = async function up(knex) { + await knex.schema.createTable('metadata', table => { + table.comment('The table of Bazaar metadata'); + table + .text('entity_ref') + .notNullable() + .unique() + .comment('The ref of the entity'); + table.text('name').notNullable().comment('The name of the entity'); + table + .text('community') + .comment('Link to where the community can discuss ideas'); + table + .text('announcement') + .notNullable() + .comment('The announcement of the Bazaar project'); + table + .text('status') + .defaultTo('proposed') + .notNullable() + .comment('The status of the Bazaar project'); + table + .text('updated_at') + .notNullable() + .comment('Timestamp on ISO 8601 format when entity was last updated'); + }); + + await knex.schema.createTable('members', table => { + table.comment('The table of Bazaar members'); + table + .text('entity_ref') + .notNullable() + .references('metadata.entity_ref') + .onDelete('CASCADE') + .comment('The ref of the entity'); + table.text('user_id').notNullable().comment('The user id of the member'); + table + .dateTime('join_date') + .defaultTo(knex.fn.now()) + .notNullable() + .comment('The timestamp when this member joined'); + table.text('picture').comment('Link to profile picture'); + }); +}; + +exports.down = async function down(knex) { + await knex.schema.dropTable('metadata'); + await knex.schema.dropTable('members'); +}; diff --git a/plugins/bazaar-backend/package.json b/plugins/bazaar-backend/package.json new file mode 100644 index 0000000000..82c3317555 --- /dev/null +++ b/plugins/bazaar-backend/package.json @@ -0,0 +1,40 @@ +{ + "name": "@backstage/plugin-bazaar-backend", + "version": "0.1.1", + "main": "src/index.ts", + "types": "src/index.ts", + "license": "Apache-2.0", + "private": false, + "publishConfig": { + "access": "public", + "main": "dist/index.cjs.js", + "types": "dist/index.d.ts" + }, + "scripts": { + "start": "backstage-cli backend:dev", + "build": "backstage-cli backend:build", + "lint": "backstage-cli lint", + "test": "backstage-cli test", + "prepack": "backstage-cli prepack", + "postpack": "backstage-cli postpack", + "clean": "backstage-cli clean" + }, + "dependencies": { + "@backstage/backend-common": "^0.9.2", + "@backstage/backend-test-utils": "^0.1.7", + "@backstage/config": "^0.1.5", + "@types/express": "^4.17.6", + "express": "^4.17.1", + "express-promise-router": "^4.1.0", + "knex": "^0.95.1", + "winston": "^3.2.1", + "yn": "^4.0.0" + }, + "devDependencies": { + "@backstage/cli": "^0.7.6" + }, + "files": [ + "dist", + "migrations/**/*.{js,d.ts}" + ] +} diff --git a/plugins/bazaar-backend/src/index.ts b/plugins/bazaar-backend/src/index.ts new file mode 100644 index 0000000000..ca73cb27ba --- /dev/null +++ b/plugins/bazaar-backend/src/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2020 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export * from './service/router'; diff --git a/plugins/bazaar-backend/src/run.ts b/plugins/bazaar-backend/src/run.ts new file mode 100644 index 0000000000..54d2716290 --- /dev/null +++ b/plugins/bazaar-backend/src/run.ts @@ -0,0 +1,33 @@ +/* + * Copyright 2020 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { getRootLogger } from '@backstage/backend-common'; +import yn from 'yn'; +import { startStandaloneServer } from './service/standaloneServer'; + +const port = process.env.PLUGIN_PORT ? Number(process.env.PLUGIN_PORT) : 7000; +const enableCors = yn(process.env.PLUGIN_CORS, { default: false }); +const logger = getRootLogger(); + +startStandaloneServer({ port, enableCors, logger }).catch(err => { + logger.error(err); + process.exit(1); +}); + +process.on('SIGINT', () => { + logger.info('CTRL+C pressed; exiting.'); + process.exit(0); +}); diff --git a/plugins/bazaar-backend/src/service/DatabaseHandler.test.ts b/plugins/bazaar-backend/src/service/DatabaseHandler.test.ts new file mode 100644 index 0000000000..4413228006 --- /dev/null +++ b/plugins/bazaar-backend/src/service/DatabaseHandler.test.ts @@ -0,0 +1,51 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { DatabaseHandler } from './DatabaseHandler'; +import { TestDatabaseId, TestDatabases } from '@backstage/backend-test-utils'; + +const bazaarProject: any = { + name: 'name', + entityRef: 'ref', + community: '', + status: 'proposed', + announcement: 'a', + membersCount: 0, +}; + +describe('DatabaseHandler', () => { + const databases = TestDatabases.create({ + ids: ['POSTGRES_13'], + }); + + async function createDatabaseHandler(databaseId: TestDatabaseId) { + const knex = await databases.init(databaseId); + return await DatabaseHandler.create({ database: knex }); + } + + it.each(databases.eachSupportedId())( + 'should do a full sync with the locations on connect, %p', + async databaseId => { + const db = await createDatabaseHandler(databaseId); + await db.insertMetadata(bazaarProject); + + const entities = await db.getEntities(); + expect(entities.length).toEqual(1); + expect(entities[0].entity_ref).toEqual(bazaarProject.entityRef); + }, + 60_000, + ); +}); diff --git a/plugins/bazaar-backend/src/service/DatabaseHandler.ts b/plugins/bazaar-backend/src/service/DatabaseHandler.ts new file mode 100644 index 0000000000..d4da6e65e7 --- /dev/null +++ b/plugins/bazaar-backend/src/service/DatabaseHandler.ts @@ -0,0 +1,145 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { resolvePackagePath } from '@backstage/backend-common'; +import { Knex } from 'knex'; + +const migrationsDir = resolvePackagePath( + '@backstage/plugin-bazaar-backend', + 'migrations', +); + +type Options = { + database: Knex; +}; + +export class DatabaseHandler { + static async create(options: Options): Promise { + const { database } = options; + + await database.migrate.latest({ + directory: migrationsDir, + }); + + return new DatabaseHandler(options); + } + + private readonly database: Knex; + + private constructor(options: Options) { + this.database = options.database; + } + + async getMembers(entityRef: string) { + return await this.database + .select('*') + .from('members') + .where({ entity_ref: entityRef }); + } + + async addMember(userId: string, entityRef: string, picture?: string) { + await this.database + .insert({ + entity_ref: entityRef, + user_id: userId, + picture: picture, + }) + .into('members'); + } + + async deleteMember(userId: string, entityRef: string) { + return await this.database('members') + .where({ entity_ref: decodeURIComponent(entityRef) }) + .andWhere('user_id', userId) + .del(); + } + + async getMetadata(entityRef: string) { + const coalesce = this.database.raw( + 'coalesce(count(members.entity_ref), 0) as members_count', + ); + + const columns = [ + 'members.entity_ref', + 'metadata.entity_ref', + 'metadata.name', + 'metadata.announcement', + 'metadata.status', + 'metadata.updated_at', + 'metadata.community', + ]; + + return await this.database('metadata') + .select([...columns, coalesce]) + .where({ 'metadata.entity_ref': entityRef }) + .groupBy(columns) + .leftJoin('members', 'metadata.entity_ref', '=', 'members.entity_ref'); + } + + async insertMetadata(bazaarProject: any) { + const { name, entityRef, community, announcement, status } = bazaarProject; + + await this.database + .insert({ + name: name, + entity_ref: entityRef, + community: community, + announcement: announcement, + status: status, + updated_at: new Date().toISOString(), + }) + .into('metadata'); + } + + async updateMetadata(bazaarProject: any) { + const { entityRef, community, announcement, status } = bazaarProject; + + return await this.database('metadata') + .where({ entity_ref: entityRef }) + .update({ + announcement: announcement, + community: community, + status: status, + updated_at: new Date().toISOString(), + }); + } + + async deleteMetadata(entityRef: string) { + return await this.database('metadata') + .where({ entity_ref: entityRef }) + .del(); + } + + async getEntities() { + const coalesce = this.database.raw( + 'coalesce(count(members.entity_ref), 0) as members_count', + ); + + const columns = [ + 'members.entity_ref', + 'metadata.entity_ref', + 'metadata.name', + 'metadata.announcement', + 'metadata.status', + 'metadata.updated_at', + 'metadata.community', + ]; + return await this.database('metadata') + .select([...columns, coalesce]) + .groupBy(columns) + .leftJoin('members', 'metadata.entity_ref', '=', 'members.entity_ref'); + } +} diff --git a/plugins/bazaar-backend/src/service/router.ts b/plugins/bazaar-backend/src/service/router.ts new file mode 100644 index 0000000000..f0bc02c65b --- /dev/null +++ b/plugins/bazaar-backend/src/service/router.ts @@ -0,0 +1,113 @@ +/* + * Copyright 2020 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { errorHandler, PluginDatabaseManager } from '@backstage/backend-common'; +import express from 'express'; +import Router from 'express-promise-router'; +import { Logger } from 'winston'; +import { Config } from '@backstage/config'; +import { DatabaseHandler } from './DatabaseHandler'; + +export interface RouterOptions { + logger: Logger; + database: PluginDatabaseManager; + config: Config; +} + +export async function createRouter( + options: RouterOptions, +): Promise { + const { logger, database } = options; + const db = await database.getClient(); + + const dbHandler = await DatabaseHandler.create({ database: db }); + + logger.info('Initializing Bazaar backend'); + + const router = Router(); + router.use(express.json()); + + router.get('/members/:ref', async (request, response) => { + const entity_ref = decodeURIComponent(request.params.ref); + const data = await dbHandler.getMembers(entity_ref); + + if (data?.length) { + response.json({ status: 'ok', data: data }); + } else { + response.json({ status: 'ok', data: [] }); + } + }); + + router.put('/member', async (request, response) => { + const { user_id, entity_ref, picture } = request.body; + await dbHandler.addMember(user_id, entity_ref, picture); + + response.json({ status: 'ok' }); + }); + + router.delete('/member/:ref/:id', async (request, response) => { + const { ref, id } = request.params; + + const count = await dbHandler.deleteMember(id, ref); + + if (count) { + response.json({ status: 'ok' }); + } else { + response.status(404).json({ message: 'Record not found' }); + } + }); + + router.get('/metadata/:ref', async (request, response) => { + const ref = decodeURIComponent(request.params.ref); + + const data = await dbHandler.getMetadata(ref); + response.json({ status: 'ok', data: data }); + }); + + router.get('/entities', async (_, response) => { + const data = await dbHandler.getEntities(); + + response.json({ status: 'ok', data: data }); + }); + + router.put('/metadata', async (request, response) => { + const bazaarProject = request.body; + + const count = await dbHandler.updateMetadata(bazaarProject); + + if (count) { + response.json({ status: 'ok' }); + } else { + await dbHandler.insertMetadata(bazaarProject); + response.json({ status: 'ok' }); + } + }); + + router.delete('/metadata/:ref', async (request, response) => { + const ref = decodeURIComponent(request.params.ref); + + const count = await dbHandler.deleteMetadata(ref); + + if (count) { + response.json({ status: 'ok' }); + } else { + response.status(404).json({ message: 'Record not found' }); + } + }); + + router.use(errorHandler()); + return router; +} diff --git a/plugins/bazaar-backend/src/service/standaloneServer.ts b/plugins/bazaar-backend/src/service/standaloneServer.ts new file mode 100644 index 0000000000..b229f5bcf8 --- /dev/null +++ b/plugins/bazaar-backend/src/service/standaloneServer.ts @@ -0,0 +1,72 @@ +/* + * Copyright 2020 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { + createServiceBuilder, + loadBackendConfig, + useHotMemoize, +} from '@backstage/backend-common'; +import { Server } from 'http'; +import { Logger } from 'winston'; +import { createRouter } from './router'; +import knexFactory from 'knex'; + +export interface ServerOptions { + port: number; + enableCors: boolean; + logger: Logger; +} + +export async function startStandaloneServer( + options: ServerOptions, +): Promise { + const logger = options.logger.child({ service: 'bazaar-backend' }); + const config = await loadBackendConfig({ logger, argv: process.argv }); + + const db = useHotMemoize(module, () => { + const knex = knexFactory({ + client: 'sqlite3', + connection: ':memory:', + useNullAsDefault: true, + }); + + knex.client.pool.on('createSuccess', (_eventId: any, resource: any) => { + resource.run('PRAGMA foreign_keys = ON', () => {}); + }); + + return knex; + }); + + const router = await createRouter({ + logger, + database: { getClient: async () => db }, + config: config, + }); + + let service = createServiceBuilder(module) + .setPort(options.port) + .addRouter('/bazaar', router); + if (options.enableCors) { + service = service.enableCors({ origin: 'http://localhost:3000' }); + } + + return await service.start().catch(err => { + logger.error(err); + process.exit(1); + }); +} + +module.hot?.accept(); diff --git a/plugins/bazaar-backend/src/setupTests.ts b/plugins/bazaar-backend/src/setupTests.ts new file mode 100644 index 0000000000..d3232290a7 --- /dev/null +++ b/plugins/bazaar-backend/src/setupTests.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2020 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export {}; diff --git a/plugins/bazaar/.eslintrc.js b/plugins/bazaar/.eslintrc.js new file mode 100644 index 0000000000..13573efa9c --- /dev/null +++ b/plugins/bazaar/.eslintrc.js @@ -0,0 +1,3 @@ +module.exports = { + extends: [require.resolve('@backstage/cli/config/eslint')], +}; diff --git a/plugins/bazaar/README.md b/plugins/bazaar/README.md new file mode 100644 index 0000000000..cd26f01997 --- /dev/null +++ b/plugins/bazaar/README.md @@ -0,0 +1,127 @@ +# @backstage/plugin-bazaar + +### What is the Bazaar? + +The Bazaar is a place where teams can propose projects for cross-functional team development. Essentially a marketplace for internal projects suitable for [Inner Sourcing](https://en.wikipedia.org/wiki/Inner_source). With "Inner Sourcing", we mean projects that are developed internally within a company, but with Open Source best practices. + +### Why? + +Many companies today are of high need to increase the ease of cross-team cooperation. In large organizations, engineers often have limited ways of discovering or announcing the projects which could benefit from a wider development effort in terms of different expertise, experiences, and teams spread across the organization. With no good way to find these existing internal projects to join, the possibility of working with Inner Sourcing practices suffers. + +### How? + +The Bazaar allows engineers and teams to open up and announce their new and exciting projects for transparent cooperation in other parts of larger organizations. The Bazaar ensures that new Inner Sourcing friendly projects gain visibility through Backstage and a way for interested engineers to show their interest and in the future contribute with their specific skill set. The Bazaar also provides an easy way to manage, catalog, and browse these Inner Sourcing friendly projects and components. + +## Getting Started + +First install the plugin into your app: + +```sh +# From your Backstage root directory +cd packages/app +yarn add @backstage/plugin-bazaar +``` + +Modify your app routes in `packages/app/src/App.tsx` to include the `Bazaar` component exported from the plugin, for example: + +```diff ++ import { BazaarPage } from '@backstage/plugin-bazaar'; + +const routes = ( + + + ... ++ } /> + {/* other routes... */} + +``` + +Add a **Bazaar icon** to the Sidebar to easily access the Bazaar. In `packages/app/src/components/Root.tsx` add: + +```diff ++ import StorefrontIcon from '@material-ui/icons/Storefront'; + + + ++ + {/* ...other sidebar-items */} +``` + +Add a **Bazaar card** to the overview tab on the `packages/app/src/components/catalog/EntityPage.tsx` add: + +```diff ++ import { EntityBazaarInfoCard } from '@backstage/plugin-bazaar'; + +const overviewContent = ( + + + + + ++ ++ ++ + + {/* ...other entity-cards */} +``` + +## How does the Bazaar work? + +### Layout + +The latest modified Bazaar projects are displayed in the Bazaar landing page, located at the Bazaar icon in the sidebar. Each project is represented as a card containing its most relevant data to give an overview of the project. The list of project is paginated. + +![home](media/bazaar_pr_fullscreen.png) + +### Workflow + +To add a project to the Bazaar, you need to create a project with one of the templates in Backstage. Click the add project-button, choose the project and fill in the form. You will be asked to add an announcement for new team members. The purpose of the announcement is for you to present your ideas and what skills you are looking for. Further you need to provide the status of the project. + +When the project is added, you will see the Bazaar information in the Bazaar card on the entity page. There you can join a project, edit or delete it. + +![workflow](media/bazaar_demo.gif) + +### Database + +The metadata related to the Bazaar is stored in a database. Right now there are two tables, one for storing the metadata and one for storing the members of a Bazaar project. + +**metadata**: + +- name - name of the entity +- entity_ref - namespace/kind/name of the entity +- announcement - announcement of the project and its current need of skills/team member +- status - status of the project, 'proposed' or 'ongoing' +- updated_at - date when the Bazaar information was last modified (ISO 8601 format) + +**members**: + +- entity_ref - namespace/kind/name of the entity +- user_name +- join_date - date when the user joined the project (ISO 8601 format) + +## Future work and ideas + +- Workflow + + - Make it possible to add a Bazaar project without linking it to a Backstage entity, this would make it easier to just add an idea to the Bazaar. + +- Bazaar landing page + + - Add a tab 'My page', where your personal data is displayed. For example: your projects and its latest activities, projects or tags you are following etc. + - Make it possible to sort the project based on the number of members + +- Bazaar card + + - Make it possible to follow tags/projects + +- Bazaar tab on the EntityPage + + - Fill Bazaar-tab with more content, for example images and achievements + - Show all the members that have joined the project + +- Dialogues + + - Extend the dialogue for adding a project with more fields, e.g. the possibility to add images + +- Testing + - Add tests to all the components diff --git a/plugins/bazaar/api-report.md b/plugins/bazaar/api-report.md new file mode 100644 index 0000000000..de94d7a48e --- /dev/null +++ b/plugins/bazaar/api-report.md @@ -0,0 +1,32 @@ +## API Report File for "@backstage/plugin-bazaar" + +> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). + +```ts +/// + +import { BackstagePlugin } from '@backstage/core-plugin-api'; +import { RouteRef } from '@backstage/core-plugin-api'; + +// Warning: (ae-missing-release-tag) "BazaarPage" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// +// @public (undocumented) +export const BazaarPage: () => JSX.Element; + +// Warning: (ae-missing-release-tag) "bazaarPlugin" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// +// @public (undocumented) +export const bazaarPlugin: BackstagePlugin< + { + root: RouteRef; + }, + {} +>; + +// Warning: (ae-missing-release-tag) "EntityBazaarInfoCard" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// +// @public (undocumented) +export const EntityBazaarInfoCard: () => JSX.Element | null; + +// (No @packageDocumentation comment for this package) +``` diff --git a/plugins/bazaar/dev/index.tsx b/plugins/bazaar/dev/index.tsx new file mode 100644 index 0000000000..a4509bc1fc --- /dev/null +++ b/plugins/bazaar/dev/index.tsx @@ -0,0 +1,27 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { createDevApp } from '@backstage/dev-utils'; +import { bazaarPlugin, BazaarPage } from '../src/plugin'; + +createDevApp() + .registerPlugin(bazaarPlugin) + .addPage({ + element: , + title: 'Root Page', + }) + .render(); diff --git a/plugins/bazaar/media/bazaar_demo.gif b/plugins/bazaar/media/bazaar_demo.gif new file mode 100644 index 0000000000..c5383de477 Binary files /dev/null and b/plugins/bazaar/media/bazaar_demo.gif differ diff --git a/plugins/bazaar/media/bazaar_pr_fullscreen.png b/plugins/bazaar/media/bazaar_pr_fullscreen.png new file mode 100644 index 0000000000..d0187977db Binary files /dev/null and b/plugins/bazaar/media/bazaar_pr_fullscreen.png differ diff --git a/plugins/bazaar/package.json b/plugins/bazaar/package.json new file mode 100644 index 0000000000..81472eff11 --- /dev/null +++ b/plugins/bazaar/package.json @@ -0,0 +1,50 @@ +{ + "name": "@backstage/plugin-bazaar", + "version": "0.1.1", + "main": "src/index.ts", + "types": "src/index.ts", + "license": "Apache-2.0", + "private": false, + "publishConfig": { + "access": "public", + "main": "dist/index.esm.js", + "types": "dist/index.d.ts" + }, + "scripts": { + "build": "backstage-cli plugin:build", + "start": "backstage-cli plugin:serve", + "lint": "backstage-cli lint", + "test": "backstage-cli test", + "diff": "backstage-cli plugin:diff", + "prepack": "backstage-cli prepack", + "postpack": "backstage-cli postpack", + "clean": "backstage-cli clean" + }, + "dependencies": { + "@backstage/catalog-model": "^0.9.0", + "@backstage/cli": "^0.7.16", + "@backstage/core-components": "^0.7.0", + "@backstage/core-plugin-api": "^0.1.10", + "@backstage/plugin-catalog": "^0.7.0", + "@backstage/plugin-catalog-react": "^0.5.0", + "@material-ui/core": "^4.12.2", + "@material-ui/icons": "^4.9.1", + "@material-ui/lab": "4.0.0-alpha.57", + "@testing-library/jest-dom": "^5.10.1", + "luxon": "^2.0.2", + "react": "^16.13.1", + "react-dom": "^16.13.1", + "react-hook-form": "^7.13.0", + "react-router-dom": "6.0.0-beta.0", + "react-use": "^17.2.4" + }, + "devDependencies": { + "@backstage/cli": "^0.7.16", + "@backstage/dev-utils": "^0.2.12", + "@testing-library/jest-dom": "^5.10.1", + "cross-fetch": "^3.0.6" + }, + "files": [ + "dist" + ] +} diff --git a/plugins/bazaar/src/api.ts b/plugins/bazaar/src/api.ts new file mode 100644 index 0000000000..db20e5e0cb --- /dev/null +++ b/plugins/bazaar/src/api.ts @@ -0,0 +1,141 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Entity, stringifyEntityRef } from '@backstage/catalog-model'; +import { + createApiRef, + DiscoveryApi, + IdentityApi, +} from '@backstage/core-plugin-api'; +import { BazaarProject } from './types'; + +export const bazaarApiRef = createApiRef({ + id: 'bazaar', + description: 'Used to make requests towards the bazaar backend', +}); + +export interface BazaarApi { + updateMetadata(bazaarProject: BazaarProject): Promise; + + getMetadata(entity: Entity): Promise; + + getMembers(entity: Entity): Promise; + + deleteMember(entity: Entity): Promise; + + addMember(entity: Entity): Promise; + + getEntities(): Promise; + + deleteEntity(bazaarProject: BazaarProject): Promise; +} + +export class BazaarClient implements BazaarApi { + private readonly identityApi: IdentityApi; + private readonly discoveryApi: DiscoveryApi; + + constructor(options: { + identityApi: IdentityApi; + discoveryApi: DiscoveryApi; + }) { + this.identityApi = options.identityApi; + this.discoveryApi = options.discoveryApi; + } + + async updateMetadata(bazaarProject: BazaarProject): Promise { + const baseUrl = await this.discoveryApi.getBaseUrl('bazaar'); + + return await fetch(`${baseUrl}/metadata`, { + method: 'PUT', + headers: { + Accept: 'application/json', + 'Content-Type': 'application/json', + }, + body: JSON.stringify(bazaarProject), + }).then(resp => resp.json()); + } + + async getMetadata(entity: Entity): Promise { + const baseUrl = await this.discoveryApi.getBaseUrl('bazaar'); + + const response = await fetch( + `${baseUrl}/metadata/${encodeURIComponent(stringifyEntityRef(entity))}`, + { + method: 'GET', + }, + ); + + return response.ok ? response : null; + } + + async getMembers(entity: Entity): Promise { + const baseUrl = await this.discoveryApi.getBaseUrl('bazaar'); + + return await fetch( + `${baseUrl}/members/${encodeURIComponent(stringifyEntityRef(entity))}`, + { + method: 'GET', + }, + ).then(resp => resp.json()); + } + + async addMember(entity: Entity): Promise { + const baseUrl = await this.discoveryApi.getBaseUrl('bazaar'); + + await fetch(`${baseUrl}/member`, { + method: 'PUT', + headers: { + Accept: 'application/json', + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + entity_ref: stringifyEntityRef(entity), + user_id: this.identityApi.getUserId(), + picture: this.identityApi.getProfile()?.picture, + }), + }); + } + + async deleteMember(entity: Entity): Promise { + const baseUrl = await this.discoveryApi.getBaseUrl('bazaar'); + + await fetch( + `${baseUrl}/member/${encodeURIComponent( + stringifyEntityRef(entity), + )}/${this.identityApi.getUserId()}`, + { + method: 'DELETE', + }, + ); + } + + async getEntities(): Promise { + const baseUrl = await this.discoveryApi.getBaseUrl('bazaar'); + + return await fetch(`${baseUrl}/entities`, { + method: 'GET', + }).then(resp => resp.json()); + } + + async deleteEntity(bazaarProject: BazaarProject): Promise { + const baseUrl = await this.discoveryApi.getBaseUrl('bazaar'); + const entityRef = bazaarProject.entityRef as string; + + await fetch(`${baseUrl}/metadata/${encodeURIComponent(entityRef)}`, { + method: 'DELETE', + }); + } +} diff --git a/plugins/bazaar/src/components/About/About.tsx b/plugins/bazaar/src/components/About/About.tsx new file mode 100644 index 0000000000..d9c529a209 --- /dev/null +++ b/plugins/bazaar/src/components/About/About.tsx @@ -0,0 +1,78 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { Grid, Typography, Link, makeStyles } from '@material-ui/core'; +import { InfoCard } from '@backstage/core-components'; + +const useStyles = makeStyles({ + subheader: { + fontWeight: 'bold', + }, +}); + +export const About = () => { + const classes = useStyles(); + return ( + + + + + What is the Bazaar? + + + The Bazaar is a place where teams can propose projects for + cross-functional team development. Essentially a marketplace for + internal projects suitable for{' '} + + Inner Sourcing + + . With "Inner Sourcing", we mean projects that are developed + internally within a company, but with Open Source best practices. + + + Why? + + + Many companies today are of high need to increase the ease of + cross-team cooperation. In large organizations, engineers often have + limited ways of discovering or announcing the projects which could + benefit from a wider development effort in terms of different + expertise, experiences, and teams spread across the organization. + With no good way to find these existing internal projects to join, + the possibility of working with Inner Sourcing practices suffers. + + + How? + + + The Bazaar allows engineers and teams to open up and announce their + new and exciting projects for transparent cooperation in other parts + of larger organizations. The Bazaar ensures that new Inner Sourcing + friendly projects gain visibility through Backstage and a way for + interested engineers to show their interest and in the future + contribute with their specific skill set. The Bazaar also provides + an easy way to manage, catalog, and browse these Inner Sourcing + friendly projects and components. + + + + + ); +}; diff --git a/plugins/bazaar/src/components/About/index.ts b/plugins/bazaar/src/components/About/index.ts new file mode 100644 index 0000000000..da078d2ce7 --- /dev/null +++ b/plugins/bazaar/src/components/About/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { About } from './About'; diff --git a/plugins/bazaar/src/components/AddProjectDialog/AddProjectDialog.tsx b/plugins/bazaar/src/components/AddProjectDialog/AddProjectDialog.tsx new file mode 100644 index 0000000000..82d682b4df --- /dev/null +++ b/plugins/bazaar/src/components/AddProjectDialog/AddProjectDialog.tsx @@ -0,0 +1,108 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { useState, useEffect } from 'react'; +import { Entity, stringifyEntityRef } from '@backstage/catalog-model'; +import { SubmitHandler } from 'react-hook-form'; +import { useApi } from '@backstage/core-plugin-api'; +import { ProjectDialog } from '../ProjectDialog'; +import { ProjectSelector } from '../ProjectSelector'; +import { BazaarProject, FormValues, Status } from '../../types'; +import { bazaarApiRef } from '../../api'; + +type Props = { + catalogEntities: Entity[]; + open: boolean; + handleClose: () => void; + fetchBazaarProjects: () => Promise; + fetchCatalogEntities: () => Promise; +}; + +export const AddProjectDialog = ({ + catalogEntities, + open, + handleClose, + fetchBazaarProjects, + fetchCatalogEntities, +}: Props) => { + const bazaarApi = useApi(bazaarApiRef); + const [selectedEntity, setSelectedEntity] = useState( + catalogEntities ? catalogEntities[0] : null, + ); + + useEffect(() => { + setSelectedEntity(catalogEntities ? catalogEntities[0] : null); + }, [catalogEntities]); + + const defaultValues = { + title: 'Add project', + community: '', + announcement: '', + status: 'proposed' as Status, + }; + + const handleListItemClick = (entity: Entity) => { + setSelectedEntity(entity); + }; + + const handleCloseDialog = () => { + setSelectedEntity(catalogEntities ? catalogEntities[0] : null); + handleClose(); + }; + + const handleSave: SubmitHandler = async ( + getValues: any, + reset: any, + ) => { + const formValues = getValues(); + + if (selectedEntity) { + await bazaarApi.updateMetadata({ + name: selectedEntity.metadata.name, + entityRef: stringifyEntityRef(selectedEntity), + announcement: formValues.announcement, + status: formValues.status, + community: formValues.community, + membersCount: 0, + } as BazaarProject); + + fetchBazaarProjects(); + fetchCatalogEntities(); + + handleClose(); + reset(defaultValues); + } + }; + + return ( + + } + handleClose={handleCloseDialog} + /> + ); +}; diff --git a/plugins/bazaar/src/components/AddProjectDialog/index.ts b/plugins/bazaar/src/components/AddProjectDialog/index.ts new file mode 100644 index 0000000000..7974186744 --- /dev/null +++ b/plugins/bazaar/src/components/AddProjectDialog/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { AddProjectDialog } from './AddProjectDialog'; diff --git a/plugins/bazaar/src/components/AlertBanner/AlertBanner.tsx b/plugins/bazaar/src/components/AlertBanner/AlertBanner.tsx new file mode 100644 index 0000000000..1b6c1331c3 --- /dev/null +++ b/plugins/bazaar/src/components/AlertBanner/AlertBanner.tsx @@ -0,0 +1,51 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { Snackbar, IconButton } from '@material-ui/core'; +import CloseIcon from '@material-ui/icons/Close'; +import { Alert } from '@material-ui/lab'; + +type Props = { + open: boolean; + message: JSX.Element; + handleClose: () => void; +}; + +export const AlertBanner = ({ open, message, handleClose }: Props) => { + return ( + + + + + } + > + {message} + + + ); +}; diff --git a/plugins/bazaar/src/components/AlertBanner/index.ts b/plugins/bazaar/src/components/AlertBanner/index.ts new file mode 100644 index 0000000000..1728cab9fc --- /dev/null +++ b/plugins/bazaar/src/components/AlertBanner/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { AlertBanner } from './AlertBanner'; diff --git a/plugins/bazaar/src/components/DeleteProjectDialog/DeleteProjectDialog.tsx b/plugins/bazaar/src/components/DeleteProjectDialog/DeleteProjectDialog.tsx new file mode 100644 index 0000000000..737fa437da --- /dev/null +++ b/plugins/bazaar/src/components/DeleteProjectDialog/DeleteProjectDialog.tsx @@ -0,0 +1,139 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { Dispatch, SetStateAction } from 'react'; +import { + createStyles, + Theme, + withStyles, + WithStyles, +} from '@material-ui/core/styles'; +import Button from '@material-ui/core/Button'; +import Dialog from '@material-ui/core/Dialog'; +import MuiDialogTitle from '@material-ui/core/DialogTitle'; +import MuiDialogContent from '@material-ui/core/DialogContent'; +import MuiDialogActions from '@material-ui/core/DialogActions'; +import IconButton from '@material-ui/core/IconButton'; +import CloseIcon from '@material-ui/icons/Close'; +import Typography from '@material-ui/core/Typography'; +import { useApi } from '@backstage/core-plugin-api'; +import { bazaarApiRef } from '../../api'; +import { BazaarProject } from '../../types'; + +const styles = (theme: Theme) => + createStyles({ + root: { + margin: 0, + padding: theme.spacing(2), + }, + closeButton: { + position: 'absolute', + right: theme.spacing(1), + top: theme.spacing(1), + color: theme.palette.grey[500], + }, + }); + +/* + DialogTitleProps, DialogTitle, DialogContent and DialogActions + are copied from the git-release plugin +*/ +export interface DialogTitleProps extends WithStyles { + id: string; + children: React.ReactNode; + onClose: () => void; +} + +const DialogTitle = withStyles(styles)((props: DialogTitleProps) => { + const { children, classes, onClose, ...other } = props; + return ( + + {children} + {onClose ? ( + + + + ) : null} + + ); +}); + +const DialogContent = withStyles((theme: Theme) => ({ + root: { + padding: theme.spacing(2), + }, +}))(MuiDialogContent); + +const DialogActions = withStyles((theme: Theme) => ({ + root: { + margin: 0, + padding: theme.spacing(1), + }, +}))(MuiDialogActions); + +type Props = { + bazaarProject: BazaarProject; + openDelete: boolean; + handleClose: () => void; + setIsBazaar: Dispatch>; +}; + +export const DeleteProjectDialog = ({ + bazaarProject, + openDelete, + handleClose, + setIsBazaar, +}: Props) => { + const handleCloseAndClear = () => { + handleClose(); + }; + + const bazaarApi = useApi(bazaarApiRef); + + const handleSubmit = async () => { + await bazaarApi.deleteEntity(bazaarProject); + setIsBazaar(false); + handleCloseAndClear(); + }; + + return ( + + + Delete project + + + + Are you sure you want to delete this project from the Bazaar? + + + + + + + ); +}; diff --git a/plugins/bazaar/src/components/DeleteProjectDialog/index.ts b/plugins/bazaar/src/components/DeleteProjectDialog/index.ts new file mode 100644 index 0000000000..fdd488aeb9 --- /dev/null +++ b/plugins/bazaar/src/components/DeleteProjectDialog/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { DeleteProjectDialog } from './DeleteProjectDialog'; diff --git a/plugins/bazaar/src/components/EditProjectDialog/EditProjectDialog.tsx b/plugins/bazaar/src/components/EditProjectDialog/EditProjectDialog.tsx new file mode 100644 index 0000000000..172bdf548d --- /dev/null +++ b/plugins/bazaar/src/components/EditProjectDialog/EditProjectDialog.tsx @@ -0,0 +1,82 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { useState, useEffect } from 'react'; +import { Entity, stringifyEntityRef } from '@backstage/catalog-model'; +import { useApi } from '@backstage/core-plugin-api'; +import { ProjectDialog } from '../ProjectDialog'; +import { BazaarProject, FormValues } from '../../types'; +import { bazaarApiRef } from '../../api'; + +type Props = { + entity: Entity; + bazaarProject: BazaarProject; + fetchBazaarProject: () => Promise; + open: boolean; + handleClose: () => void; + isAddForm: boolean; +}; + +export const EditProjectDialog = ({ + entity, + bazaarProject, + fetchBazaarProject, + open, + handleClose, +}: Props) => { + const [defaultValues, setDefaultValues] = useState({ + announcement: bazaarProject.announcement, + community: bazaarProject.community, + status: bazaarProject.status, + }); + + const bazaarApi = useApi(bazaarApiRef); + + useEffect(() => { + setDefaultValues({ + announcement: bazaarProject.announcement, + community: bazaarProject.community, + status: bazaarProject.status, + }); + }, [bazaarProject]); + + const handleSave: any = async (getValues: any, _: any) => { + const formValues = getValues(); + + const updateResponse = await bazaarApi.updateMetadata({ + name: entity.metadata.name, + entityRef: stringifyEntityRef(entity), + announcement: formValues.announcement, + status: formValues.status, + community: formValues.community, + membersCount: bazaarProject.membersCount, + }); + + if (updateResponse.status === 'ok') fetchBazaarProject(); + handleClose(); + }; + + return ( + + ); +}; diff --git a/plugins/bazaar/src/components/EditProjectDialog/index.ts b/plugins/bazaar/src/components/EditProjectDialog/index.ts new file mode 100644 index 0000000000..4c48c375ce --- /dev/null +++ b/plugins/bazaar/src/components/EditProjectDialog/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { EditProjectDialog } from './EditProjectDialog'; diff --git a/plugins/bazaar/src/components/EntityBazaarInfoCard/EntityBazaarInfoCard.tsx b/plugins/bazaar/src/components/EntityBazaarInfoCard/EntityBazaarInfoCard.tsx new file mode 100644 index 0000000000..6bf844d592 --- /dev/null +++ b/plugins/bazaar/src/components/EntityBazaarInfoCard/EntityBazaarInfoCard.tsx @@ -0,0 +1,324 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { useState, useEffect } from 'react'; +import { + Grid, + makeStyles, + Card, + CardContent, + CardHeader, + Typography, + Divider, + IconButton, + Popover, + MenuList, + MenuItem, + ListItemText, + Link, +} from '@material-ui/core'; +import { + Progress, + HeaderIconLinkRow, + IconLinkVerticalProps, + Avatar, +} from '@backstage/core-components'; +import { useEntity } from '@backstage/plugin-catalog-react'; +import { AboutField } from '@backstage/plugin-catalog'; +import { StatusTag } from '../StatusTag'; +import EditIcon from '@material-ui/icons/Edit'; +import ChatIcon from '@material-ui/icons/Chat'; +import PersonAddIcon from '@material-ui/icons/PersonAdd'; +import MoreVertIcon from '@material-ui/icons/MoreVert'; +import DeleteIcon from '@material-ui/icons/Delete'; +import { EditProjectDialog } from '../EditProjectDialog'; +import { DeleteProjectDialog } from '../DeleteProjectDialog'; +import ExitToAppIcon from '@material-ui/icons/ExitToApp'; +import { useApi, identityApiRef } from '@backstage/core-plugin-api'; +import { Member, BazaarProject } from '../../types'; +import { bazaarApiRef } from '../../api'; +import { Alert } from '@material-ui/lab'; +import { useAsyncFn } from 'react-use'; + +const useStyles = makeStyles({ + description: { + wordBreak: 'break-word', + }, + icon: { + marginRight: '1.75rem', + }, + link: { + color: '#9cc9ff', + '&:hover': { + textDecoration: 'underline', + }, + }, + memberLink: { + display: 'block', + marginBottom: '0.3rem', + }, +}); + +const sortMembers = (m1: Member, m2: Member) => { + return new Date(m2.joinDate!).getTime() - new Date(m1.joinDate!).getTime(); +}; + +export const EntityBazaarInfoCard = () => { + const { entity } = useEntity(); + const classes = useStyles(); + const bazaarApi = useApi(bazaarApiRef); + const identity = useApi(identityApiRef); + const [anchorEl, setAnchorEl] = useState(); + const [open, setOpen] = useState(false); + const [popoverOpen, setPopoverOpen] = useState(false); + const [openDelete, setOpenDelete] = useState(false); + const [isMember, setIsMember] = useState(false); + const [isBazaar, setIsBazaar] = useState(false); + const [members, fetchMembers] = useAsyncFn(async () => { + const response = await bazaarApi.getMembers(entity); + + const dbMembers = response.data.map((obj: any) => { + const member: Member = { + userId: obj.user_id, + entityRef: obj.entity_ref, + joinDate: obj.join_date, + picture: obj.picture, + }; + + return member; + }); + + dbMembers.sort(sortMembers); + + return dbMembers; + }); + + const [bazaarProject, fetchBazaarProject] = useAsyncFn(async () => { + const response = await bazaarApi.getMetadata(entity); + + if (response) { + const metadata = await response.json().then((resp: any) => resp.data[0]); + + if (metadata) { + return { + entityRef: metadata.entity_ref, + name: metadata.name, + community: metadata.community, + announcement: metadata.announcement, + status: metadata.status, + updatedAt: metadata.updated_at, + membersCount: metadata.members_count, + } as BazaarProject; + } + } + return null; + }); + + useEffect(() => { + fetchMembers(); + fetchBazaarProject(); + }, [fetchMembers, fetchBazaarProject]); + + useEffect(() => { + const isBazaarMember = + members?.value + ?.map((member: Member) => member.userId) + .indexOf(identity.getUserId()) >= 0; + const isBazaarProject = bazaarProject.value !== null; + + setIsMember(isBazaarMember); + setIsBazaar(isBazaarProject); + }, [bazaarProject, members, identity]); + + const onOpen = (event: React.SyntheticEvent) => { + setAnchorEl(event.currentTarget); + setPopoverOpen(true); + }; + + const closeEdit = () => { + setOpen(false); + }; + + const closeDelete = () => { + setOpenDelete(false); + }; + + const popoverCloseHandler = () => { + setPopoverOpen(false); + }; + + const handleMembersClick = async () => { + if (!isMember) { + await bazaarApi.addMember(entity); + } else { + await bazaarApi.deleteMember(entity); + } + + fetchMembers(); + fetchBazaarProject(); + }; + + const links: IconLinkVerticalProps[] = [ + { + label: isMember ? 'Leave' : 'Join', + icon: isMember ? : , + href: '', + onClick: async () => { + handleMembersClick(); + }, + }, + { + label: 'Community', + icon: , + href: bazaarProject?.value?.community, + disabled: !bazaarProject?.value?.community || !isMember, + }, + ]; + + if (!isBazaar) { + return null; + } else if (bazaarProject.loading || members.loading) { + return ; + } else if (bazaarProject.error) { + return {bazaarProject?.error?.message}; + } else if (members.error) { + return {members?.error?.message}; + } + return ( + + {bazaarProject?.value && ( + + )} + + {bazaarProject?.value && ( + + )} + + + + } + subheader={} + /> + + + + + { + setOpen(true); + setPopoverOpen(false); + }} + > + + + + + { + setOpenDelete(true); + setPopoverOpen(false); + }} + > + + + + + + + + + {bazaarProject?.value?.announcement + ? bazaarProject?.value?.announcement + .split('\n') + .map((str: string, i: number) => ( + + {str} + + )) + : 'No announcement'} + + + + + + + + + + + {' '} + + {members?.value?.length ? ( + members.value.slice(0, 3).map((member: Member) => { + return ( +
+ + + {member?.userId} + +
+ ); + }) + ) : ( +
+ )} + + + + + + ); +}; diff --git a/plugins/bazaar/src/components/EntityBazaarInfoCard/index.ts b/plugins/bazaar/src/components/EntityBazaarInfoCard/index.ts new file mode 100644 index 0000000000..89eee92f11 --- /dev/null +++ b/plugins/bazaar/src/components/EntityBazaarInfoCard/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { EntityBazaarInfoCard } from './EntityBazaarInfoCard'; diff --git a/plugins/bazaar/src/components/HomePage/HomePage.tsx b/plugins/bazaar/src/components/HomePage/HomePage.tsx new file mode 100644 index 0000000000..32a16291fc --- /dev/null +++ b/plugins/bazaar/src/components/HomePage/HomePage.tsx @@ -0,0 +1,47 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { Header, RoutedTabs } from '@backstage/core-components'; +import { Route } from 'react-router-dom'; +import { SortView } from '../SortView'; +import { About } from '../About'; + +export const HomePage = () => { + const tabContent = [ + { + path: '/', + title: 'Home', + children: } />, + }, + { + path: '/about', + title: 'About', + children: } />, + }, + ]; + + return ( +
+
+ +
+ ); +}; diff --git a/plugins/bazaar/src/components/HomePage/index.ts b/plugins/bazaar/src/components/HomePage/index.ts new file mode 100644 index 0000000000..41d7bc5d03 --- /dev/null +++ b/plugins/bazaar/src/components/HomePage/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { HomePage } from './HomePage'; diff --git a/plugins/bazaar/src/components/InputField/InputField.tsx b/plugins/bazaar/src/components/InputField/InputField.tsx new file mode 100644 index 0000000000..4d284ff82c --- /dev/null +++ b/plugins/bazaar/src/components/InputField/InputField.tsx @@ -0,0 +1,63 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { Controller, Control, FieldError } from 'react-hook-form'; +import { TextField } from '@material-ui/core'; +import { FormValues } from '../../types'; + +type Props = { + inputType: 'announcement' | 'community'; + error?: FieldError | undefined; + control: Control; + helperText?: string; + placeholder?: string; + rules?: Object; +}; + +export const InputField = ({ + inputType, + error, + control, + helperText, + placeholder, + rules, +}: Props) => { + const label = + inputType.charAt(0).toLocaleUpperCase('en-US') + inputType.slice(1); + + return ( + ( + + )} + /> + ); +}; diff --git a/plugins/bazaar/src/components/InputField/index.ts b/plugins/bazaar/src/components/InputField/index.ts new file mode 100644 index 0000000000..d8c82eecbd --- /dev/null +++ b/plugins/bazaar/src/components/InputField/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { InputField } from './InputField'; diff --git a/plugins/bazaar/src/components/InputSelector/InputSelector.tsx b/plugins/bazaar/src/components/InputSelector/InputSelector.tsx new file mode 100644 index 0000000000..a41cedfcf3 --- /dev/null +++ b/plugins/bazaar/src/components/InputSelector/InputSelector.tsx @@ -0,0 +1,75 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import InputLabel from '@material-ui/core/InputLabel'; +import MenuItem from '@material-ui/core/MenuItem'; +import FormControl from '@material-ui/core/FormControl'; +import Select from '@material-ui/core/Select'; +import { Controller, Control, FieldError } from 'react-hook-form'; +import { FormValues } from '../../types'; + +type Props = { + options: string[]; + control: Control; + name: 'announcement' | 'status'; + error?: FieldError | undefined; +}; + +export const InputSelector = ({ name, options, control, error }: Props) => { + const label = name.charAt(0).toLocaleUpperCase('en-US') + name.slice(1); + + return ( + ( + + + {label} + + + + )} + /> + ); +}; diff --git a/plugins/bazaar/src/components/InputSelector/index.ts b/plugins/bazaar/src/components/InputSelector/index.ts new file mode 100644 index 0000000000..a4327991b0 --- /dev/null +++ b/plugins/bazaar/src/components/InputSelector/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { InputSelector } from './InputSelector'; diff --git a/plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx b/plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx new file mode 100644 index 0000000000..b3c8b3e2e7 --- /dev/null +++ b/plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx @@ -0,0 +1,98 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { ItemCardHeader } from '@backstage/core-components'; +import { + Card, + CardActionArea, + CardContent, + makeStyles, + Typography, +} from '@material-ui/core'; +import { StatusTag } from '../StatusTag/StatusTag'; +import { Link as RouterLink } from 'react-router-dom'; +import { catalogRouteRef } from '@backstage/plugin-catalog-react'; +import { useRouteRef } from '@backstage/core-plugin-api'; +import { BazaarProject } from '../../types'; +import { parseEntityName } from '@backstage/catalog-model'; +import { DateTime } from 'luxon'; + +const useStyles = makeStyles({ + statusTag: { + display: 'inline-block', + whiteSpace: 'nowrap', + marginBottom: '0.5rem', + }, + announcement: { + display: '-webkit-box', + WebkitLineClamp: 5, + WebkitBoxOrient: 'vertical', + marginBottom: '0.8rem', + overflow: 'hidden', + }, + memberCount: { + float: 'right', + }, +}); + +type Props = { + bazaarProject: BazaarProject; +}; + +export const ProjectCard = ({ bazaarProject }: Props) => { + const classes = useStyles(); + const { entityRef, name, status, updatedAt, announcement, membersCount } = + bazaarProject; + const catalogLink = useRouteRef(catalogRouteRef); + const { namespace, kind } = parseEntityName(entityRef); + + return ( + + + + + + + {membersCount === 1 + ? `${membersCount} member` + : `${membersCount} members`} + +
+ + {announcement} + +
+ + + + ); +}; diff --git a/plugins/bazaar/src/components/ProjectCard/index.ts b/plugins/bazaar/src/components/ProjectCard/index.ts new file mode 100644 index 0000000000..00e62bebba --- /dev/null +++ b/plugins/bazaar/src/components/ProjectCard/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { ProjectCard } from './ProjectCard'; diff --git a/plugins/bazaar/src/components/ProjectDialog/ProjectDialog.tsx b/plugins/bazaar/src/components/ProjectDialog/ProjectDialog.tsx new file mode 100644 index 0000000000..cb76984f44 --- /dev/null +++ b/plugins/bazaar/src/components/ProjectDialog/ProjectDialog.tsx @@ -0,0 +1,186 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { + createStyles, + Theme, + withStyles, + WithStyles, +} from '@material-ui/core/styles'; +import MuiDialogTitle from '@material-ui/core/DialogTitle'; +import MuiDialogContent from '@material-ui/core/DialogContent'; +import MuiDialogActions from '@material-ui/core/DialogActions'; +import CloseIcon from '@material-ui/icons/Close'; +import { Button, Dialog, Typography, IconButton } from '@material-ui/core'; +import { useForm, SubmitHandler } from 'react-hook-form'; +import { InputField } from '../InputField/InputField'; +import { InputSelector } from '../InputSelector/InputSelector'; +import { FormValues } from '../../types'; + +const styles = (theme: Theme) => + createStyles({ + root: { + margin: 0, + padding: theme.spacing(2), + }, + closeButton: { + position: 'absolute', + right: theme.spacing(1), + top: theme.spacing(1), + color: theme.palette.grey[500], + }, + }); + +/* + DialogTitleProps, DialogTitle, DialogContent and DialogActions + are copied from the git-release plugin +*/ +export interface DialogTitleProps extends WithStyles { + id: string; + children: React.ReactNode; + onClose: () => void; +} + +const DialogTitle = withStyles(styles)((props: DialogTitleProps) => { + const { children, classes, onClose, ...other } = props; + return ( + + {children} + {onClose ? ( + + + + ) : null} + + ); +}); + +const DialogContent = withStyles((theme: Theme) => ({ + root: { + padding: theme.spacing(2), + }, +}))(MuiDialogContent); + +const DialogActions = withStyles((theme: Theme) => ({ + root: { + margin: 0, + padding: theme.spacing(1), + }, +}))(MuiDialogActions); + +type Props = { + handleSave: (getValues: any, reset: any) => SubmitHandler; + isAddForm: boolean; + title: string; + defaultValues: FormValues; + open: boolean; + projectSelector?: JSX.Element; + handleClose: () => void; +}; + +export const ProjectDialog = ({ + handleSave, + isAddForm, + title, + defaultValues, + open, + projectSelector, + handleClose, +}: Props) => { + const { + handleSubmit, + reset, + control, + getValues, + formState: { errors }, + } = useForm({ + mode: 'onChange', + defaultValues: defaultValues, + }); + + const handleCloseAndClear = () => { + handleClose(); + reset(defaultValues); + }; + + const handleSaveProject = () => { + handleSave(getValues, reset); + }; + + return ( +
+ + + {title} + + + + {isAddForm && projectSelector} + + + + + + + + + + + + +
+ ); +}; diff --git a/plugins/bazaar/src/components/ProjectDialog/index.ts b/plugins/bazaar/src/components/ProjectDialog/index.ts new file mode 100644 index 0000000000..bd85b6576b --- /dev/null +++ b/plugins/bazaar/src/components/ProjectDialog/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { ProjectDialog } from './ProjectDialog'; diff --git a/plugins/bazaar/src/components/ProjectPreview/ProjectPreview.tsx b/plugins/bazaar/src/components/ProjectPreview/ProjectPreview.tsx new file mode 100644 index 0000000000..0b01b86088 --- /dev/null +++ b/plugins/bazaar/src/components/ProjectPreview/ProjectPreview.tsx @@ -0,0 +1,109 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { useState } from 'react'; +import { Content } from '@backstage/core-components'; +import { ProjectCard } from '../ProjectCard/ProjectCard'; +import { makeStyles, Grid } from '@material-ui/core'; +import Pagination from '@material-ui/lab/Pagination'; +import { BazaarProject } from '../../types'; + +type Props = { + bazaarProjects: BazaarProject[]; + sortingMethod: (arg0: BazaarProject, arg1: BazaarProject) => number; +}; + +const useStyles = makeStyles({ + content: { + width: '100%', + display: 'flex', + flexWrap: 'wrap', + alignItems: 'center', + }, + item: { + minWidth: '20.5rem', + maxWidth: '20.5rem', + width: '20%', + }, +}); + +export const ProjectPreview = ({ bazaarProjects, sortingMethod }: Props) => { + const classes = useStyles(); + const [currentPage, setCurrentPage] = useState(1); + const pageSize = 10; + const pageCount = Math.ceil(bazaarProjects.length / pageSize); + + const handlePageClick = (_: any, pageIndex: number) => { + setCurrentPage(pageIndex); + }; + + if (!bazaarProjects.length) { + return ( +
+ Please add projects to the Bazaar. +
+ ); + } + + bazaarProjects.sort(sortingMethod); + + return ( + + + {bazaarProjects + .slice(pageSize * (currentPage - 1), pageSize * currentPage) + .map((bazaarProject: BazaarProject) => { + const entityRef = bazaarProject.entityRef; + + return ( + + + + ); + })} + + + + ); +}; diff --git a/plugins/bazaar/src/components/ProjectPreview/index.ts b/plugins/bazaar/src/components/ProjectPreview/index.ts new file mode 100644 index 0000000000..74a954c595 --- /dev/null +++ b/plugins/bazaar/src/components/ProjectPreview/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { ProjectPreview } from './ProjectPreview'; diff --git a/plugins/bazaar/src/components/ProjectSelector/ProjectSelector.tsx b/plugins/bazaar/src/components/ProjectSelector/ProjectSelector.tsx new file mode 100644 index 0000000000..1c2718d403 --- /dev/null +++ b/plugins/bazaar/src/components/ProjectSelector/ProjectSelector.tsx @@ -0,0 +1,54 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { Entity } from '@backstage/catalog-model'; +import { Autocomplete } from '@material-ui/lab'; +import { TextField } from '@material-ui/core'; + +type Props = { + entities: Entity[]; + value: string; + onChange: (entity: Entity) => void; + isFormInvalid: boolean; +}; + +export const ProjectSelector = ({ + entities, + value, + onChange, + isFormInvalid, +}: Props) => { + return ( + option?.metadata?.name} + renderOption={option => {option?.metadata?.name}} + renderInput={params => ( + + )} + onChange={(_, data) => onChange(data!)} + /> + ); +}; diff --git a/plugins/bazaar/src/components/ProjectSelector/index.ts b/plugins/bazaar/src/components/ProjectSelector/index.ts new file mode 100644 index 0000000000..e81b825dbf --- /dev/null +++ b/plugins/bazaar/src/components/ProjectSelector/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { ProjectSelector } from './ProjectSelector'; diff --git a/plugins/bazaar/src/components/SortView/SortView.tsx b/plugins/bazaar/src/components/SortView/SortView.tsx new file mode 100644 index 0000000000..99d3f84ac3 --- /dev/null +++ b/plugins/bazaar/src/components/SortView/SortView.tsx @@ -0,0 +1,183 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { useEffect, useState } from 'react'; +import { + Content, + ContentHeader, + SupportButton, + Progress, +} from '@backstage/core-components'; +import { AddProjectDialog } from '../AddProjectDialog'; +import { AlertBanner } from '../AlertBanner'; +import { ProjectPreview } from '../ProjectPreview/ProjectPreview'; +import { Button, makeStyles, Link } from '@material-ui/core'; +import { useAsyncFn } from 'react-use'; +import { Entity, stringifyEntityRef } from '@backstage/catalog-model'; +import { useApi } from '@backstage/core-plugin-api'; +import { catalogApiRef } from '@backstage/plugin-catalog-react'; +import { BazaarProject } from '../../types'; +import { bazaarApiRef } from '../../api'; +import { Alert } from '@material-ui/lab'; + +const useStyles = makeStyles({ + container: { + marginTop: '2rem', + }, +}); + +const filterCatalogEntities = ( + bazaarProjects: BazaarProject[], + catalogEntities: Entity[], +) => { + const bazaarProjectRefs = bazaarProjects.map( + (project: BazaarProject) => project.entityRef, + ); + + const filtered = catalogEntities.filter((entity: Entity) => { + return !bazaarProjectRefs?.includes(stringifyEntityRef(entity)); + }); + + return filtered; +}; + +export const SortView = () => { + const classes = useStyles(); + const [openAdd, setOpenAdd] = useState(false); + const [openNoProjects, setOpenNoProjects] = useState(false); + const bazaarApi = useApi(bazaarApiRef); + const catalogApi = useApi(catalogApiRef); + const [filteredCatalogEntites, setFilteredCatalogEntities] = + useState(); + + const compareProjectsByDate = ( + a: BazaarProject, + b: BazaarProject, + ): number => { + const dateA = new Date(a.updatedAt!).getTime(); + const dateB = new Date(b.updatedAt!).getTime(); + return dateB - dateA; + }; + + const handleCloseNoProjects = () => { + setOpenNoProjects(false); + }; + + const [catalogEntities, fetchCatalogEntities] = useAsyncFn(async () => { + const entities = await catalogApi.getEntities({ + filter: { + kind: ['Component', 'Resource'], + }, + fields: ['kind', 'metadata.name', 'metadata.namespace'], + }); + + return entities.items; + }); + + const [bazaarProjects, fetchBazaarProjects] = useAsyncFn(async () => { + const response = await bazaarApi.getEntities(); + const dbProjects: BazaarProject[] = []; + + response.data.forEach((project: any) => { + dbProjects.push({ + entityRef: project.entity_ref, + name: project.name, + status: project.status, + announcement: project.announcement, + community: project.community, + updatedAt: project.updated_at, + membersCount: project.members_count, + }); + }); + + return dbProjects; + }); + + useEffect(() => { + fetchCatalogEntities(); + fetchBazaarProjects(); + }, [fetchBazaarProjects, fetchCatalogEntities]); + + useEffect(() => { + const filteredCatalogEntities = filterCatalogEntities( + bazaarProjects.value || [], + catalogEntities.value || [], + ); + + if (filteredCatalogEntities) { + setFilteredCatalogEntities(filteredCatalogEntities); + } + }, [bazaarProjects, catalogEntities]); + + if (catalogEntities.loading || bazaarProjects.loading) return ; + + if (catalogEntities.error) + return {catalogEntities.error.message}; + + if (bazaarProjects.error) + return {bazaarProjects.error.message}; + + return ( + + + No project available. Please{' '} + + create a project + {' '} + from a template first. +
+ } + handleClose={handleCloseNoProjects} + /> + + + { + setOpenAdd(false); + }} + open={openAdd} + fetchBazaarProjects={fetchBazaarProjects} + fetchCatalogEntities={fetchCatalogEntities} + /> + + + + + + ); +}; diff --git a/plugins/bazaar/src/components/SortView/index.ts b/plugins/bazaar/src/components/SortView/index.ts new file mode 100644 index 0000000000..086c7c29d1 --- /dev/null +++ b/plugins/bazaar/src/components/SortView/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { SortView } from './SortView'; diff --git a/plugins/bazaar/src/components/StatusTag/StatusTag.tsx b/plugins/bazaar/src/components/StatusTag/StatusTag.tsx new file mode 100644 index 0000000000..eb01ea5350 --- /dev/null +++ b/plugins/bazaar/src/components/StatusTag/StatusTag.tsx @@ -0,0 +1,37 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { StatusOK, StatusWarning } from '@backstage/core-components'; +import { Status } from '../../types'; + +interface StatusComponent { + [key: string]: JSX.Element | undefined; +} + +const statuses: StatusComponent = { + proposed: proposed, + ongoing: ongoing, +}; + +type Props = { + status: Status; + styles?: string; +}; + +export const StatusTag = ({ status, styles }: Props) => { + return
{statuses[status]}
; +}; diff --git a/plugins/bazaar/src/components/StatusTag/index.ts b/plugins/bazaar/src/components/StatusTag/index.ts new file mode 100644 index 0000000000..33886382f8 --- /dev/null +++ b/plugins/bazaar/src/components/StatusTag/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { StatusTag } from './StatusTag'; diff --git a/plugins/bazaar/src/index.ts b/plugins/bazaar/src/index.ts new file mode 100644 index 0000000000..e9b388d736 --- /dev/null +++ b/plugins/bazaar/src/index.ts @@ -0,0 +1,18 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { bazaarPlugin, BazaarPage } from './plugin'; +export { EntityBazaarInfoCard } from './components/EntityBazaarInfoCard'; diff --git a/plugins/bazaar/src/plugin.test.ts b/plugins/bazaar/src/plugin.test.ts new file mode 100644 index 0000000000..4d9964d1dd --- /dev/null +++ b/plugins/bazaar/src/plugin.test.ts @@ -0,0 +1,23 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { bazaarPlugin } from './plugin'; + +describe('bazaar', () => { + it('should export plugin', () => { + expect(bazaarPlugin).toBeDefined(); + }); +}); diff --git a/plugins/bazaar/src/plugin.ts b/plugins/bazaar/src/plugin.ts new file mode 100644 index 0000000000..f96eaf522d --- /dev/null +++ b/plugins/bazaar/src/plugin.ts @@ -0,0 +1,50 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { rootRouteRef } from './routes'; +import { + createApiFactory, + createPlugin, + createRoutableExtension, + identityApiRef, + discoveryApiRef, +} from '@backstage/core-plugin-api'; +import { bazaarApiRef, BazaarClient } from './api'; + +export const bazaarPlugin = createPlugin({ + id: 'bazaar', + routes: { + root: rootRouteRef, + }, + apis: [ + createApiFactory({ + api: bazaarApiRef, + deps: { + identityApi: identityApiRef, + discoveryApi: discoveryApiRef, + }, + factory: ({ identityApi, discoveryApi }) => + new BazaarClient({ identityApi, discoveryApi }), + }), + ], +}); + +export const BazaarPage = bazaarPlugin.provide( + createRoutableExtension({ + component: () => import('./components/HomePage').then(m => m.HomePage), + mountPoint: rootRouteRef, + }), +); diff --git a/plugins/bazaar/src/routes.ts b/plugins/bazaar/src/routes.ts new file mode 100644 index 0000000000..a3cc88d86f --- /dev/null +++ b/plugins/bazaar/src/routes.ts @@ -0,0 +1,21 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { createRouteRef } from '@backstage/core-plugin-api'; + +export const rootRouteRef = createRouteRef({ + title: 'bazaar', +}); diff --git a/plugins/bazaar/src/setupTests.ts b/plugins/bazaar/src/setupTests.ts new file mode 100644 index 0000000000..427556fe26 --- /dev/null +++ b/plugins/bazaar/src/setupTests.ts @@ -0,0 +1,18 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import '@testing-library/jest-dom'; +import 'cross-fetch/polyfill'; diff --git a/plugins/bazaar/src/types.ts b/plugins/bazaar/src/types.ts new file mode 100644 index 0000000000..4050c6a2ee --- /dev/null +++ b/plugins/bazaar/src/types.ts @@ -0,0 +1,42 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { EntityRef } from '@backstage/catalog-model'; + +export type Member = { + entityRef: EntityRef; + userId: string; + joinDate?: string; + picture?: string; +}; + +export type Status = 'ongoing' | 'proposed'; + +export type BazaarProject = { + name: string; + entityRef: EntityRef; + community: string; + status: Status; + announcement: string; + updatedAt?: string; + membersCount: number; +}; + +export type FormValues = { + announcement: string; + community: string; + status: string; +}; diff --git a/yarn.lock b/yarn.lock index ff75ed691b..d4c8b7053a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -23469,6 +23469,11 @@ react-hook-form@^7.12.2: resolved "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.16.1.tgz#669046df378a71949e5cf8a2398cbe20d5cb27bc" integrity sha512-kcLDmSmlyLUFx2UU5bG/o4+3NeK753fhKodJa8gkplXohGkpAq0/p+TR24OWjZmkEc3ES7ppC5v5d6KUk+fJTA== +react-hook-form@^7.13.0: + version "7.17.4" + resolved "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.17.4.tgz#232b6aaccddb91eb4a228ac20b154abd90866fdb" + integrity sha512-7XhbCr7d9fDC1TgcK/BUbt7D3q0VJMu7jPErfsa0JrxVjv/nni41xWdJcy0Zb7R+Np8OsCkQ2lMyloAtE3DLiQ== + react-hot-loader@^4.12.21: version "4.13.0" resolved "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.13.0.tgz#c27e9408581c2a678f5316e69c061b226dc6a202"