plugin(npm): add/migrate new npm plugin (shows information for entiti…

…es from npmjs.com) (#1485)

* plugin(npm): create new workspace
* plugin(npm): add backstage app
* plugin(npm): create new plugin
* plugin(npm): create/migrate npm plugin
* plugin(npm): show more information
* plugin(npm): add additional metadata
* plugin(npm): add api report
* plugin(npm): add knip report
* plugin(npm): add missing repository
* plugin(npm): add changeset to trigger initial release
* plugin(npm): open links in new tabs, added loading indicator and render errors

Signed-off-by: Christoph Jerolimov <[email protected]>

.github/CODEOWNERS

@@ -29,6 +29,7 @@ yarn.lock                                           @backstage/community-plugins
 /workspaces/kafka                                   @backstage/community-plugins-maintainers  @andrewthauer
 /workspaces/linguist                                @backstage/community-plugins-maintainers  @awanlin
 /workspaces/nexus-repository-manager                @backstage/community-plugins-maintainers  @schultzp2020
+/workspaces/npm                                     @backstage/community-plugins-maintainers  @jerolimov
 /workspaces/octopus-deploy                          @backstage/community-plugins-maintainers  @jmezach
 /workspaces/pingidentity                            @backstage/community-plugins-maintainers  @jessicajhee
 /workspaces/playlist                                @backstage/community-plugins-maintainers  @kuangp

workspaces/npm/.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

workspaces/npm/.changeset/config.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch"
+}

workspaces/npm/.changeset/proud-brooms-clean.md

@@ -0,0 +1,5 @@
+---
+'@backstage-community/plugin-npm': major
+---
+
+Initial version that shows meta info and latest versions from a npm registry

workspaces/npm/.dockerignore

@@ -0,0 +1,8 @@
+.git
+.yarn/cache
+.yarn/install-state.gz
+node_modules
+packages/*/src
+packages/*/node_modules
+plugins
+*.local.yaml

workspaces/npm/.eslintignore

@@ -0,0 +1 @@
+playwright.config.ts

workspaces/npm/.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require('../../.eslintrc.cjs');

workspaces/npm/.gitignore

@@ -0,0 +1,54 @@
+# macOS
+.DS_Store
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Coverage directory generated when running tests with coverage
+coverage
+
+# Dependencies
+node_modules/
+
+# Yarn files
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# Node version directives
+.nvmrc
+
+# dotenv environment variables file
+.env
+.env.test
+
+# Build output
+dist
+dist-types
+
+# Temporary change files created by Vim
+*.swp
+
+# MkDocs build output
+site
+
+# Local configuration files
+*.local.yaml
+
+# Sensitive credentials
+*-credentials.yaml
+
+# vscode database functionality support files
+*.session.sql
+
+# E2E test reports
+e2e-test-report/

workspaces/npm/.prettierignore

@@ -0,0 +1,5 @@
+dist
+dist-types
+coverage
+.vscode
+.eslintrc.js

workspaces/npm/README.md

@@ -0,0 +1,16 @@
+# [Backstage](https://backstage.io)
+
+This is your newly scaffolded Backstage App, Good Luck!
+
+To start the app, run:
+
+```sh
+yarn install
+yarn dev
+```
+
+To generate knip reports for this app, run:
+
+```sh
+yarn backstage-repo-tools knip-reports
+```

workspaces/npm/app-config.yaml

@@ -0,0 +1,110 @@
+app:
+  title: Npm Plugin Example App
+  baseUrl: http://localhost:3000
+
+organization:
+  name: Npm Plugin Example
+
+backend:
+  # Used for enabling authentication, secret is shared by all backend plugins
+  # See https://backstage.io/docs/auth/service-to-service-auth for
+  # information on the format
+  # auth:
+  #   keys:
+  #     - secret: ${BACKEND_SECRET}
+  baseUrl: http://localhost:7007
+  listen:
+    port: 7007
+    # Uncomment the following host directive to bind to specific interfaces
+    # host: 127.0.0.1
+  csp:
+    connect-src: ["'self'", 'http:', 'https:']
+    # Content-Security-Policy directives follow the Helmet format: https://helmetjs.github.io/#reference
+    # Default Helmet Content-Security-Policy values can be removed by setting the key to false
+  cors:
+    origin: http://localhost:3000
+    methods: [GET, HEAD, PATCH, POST, PUT, DELETE]
+    credentials: true
+  # This is for local development only, it is not recommended to use this in production
+  # The production database configuration is stored in app-config.production.yaml
+  database:
+    client: better-sqlite3
+    connection: ':memory:'
+  # workingDirectory: /tmp # Use this to configure a working directory for the scaffolder, defaults to the OS temp-dir
+
+integrations:
+  github:
+    - host: github.com
+      # This is a Personal Access Token or PAT from GitHub. You can find out how to generate this token, and more information
+      # about setting up the GitHub integration here: https://backstage.io/docs/integrations/github/locations#configuration
+      token: ${GITHUB_TOKEN}
+    ### Example for how to add your GitHub Enterprise instance using the API:
+    # - host: ghe.example.net
+    #   apiBaseUrl: https://ghe.example.net/api/v3
+    #   token: ${GHE_TOKEN}
+
+proxy:
+  ### Example for how to add a proxy endpoint for the frontend.
+  ### A typical reason to do this is to handle HTTPS and CORS for internal services.
+  # endpoints:
+  #   '/test':
+  #     target: 'https://example.com'
+  #     changeOrigin: true
+
+# Reference documentation http://backstage.io/docs/features/techdocs/configuration
+# Note: After experimenting with basic setup, use CI/CD to generate docs
+# and an external cloud storage when deploying TechDocs for production use-case.
+# https://backstage.io/docs/features/techdocs/how-to-guides#how-to-migrate-from-techdocs-basic-to-recommended-deployment-approach
+techdocs:
+  builder: 'local' # Alternatives - 'external'
+  generator:
+    runIn: 'docker' # Alternatives - 'local'
+  publisher:
+    type: 'local' # Alternatives - 'googleGcs' or 'awsS3'. Read documentation for using alternatives.
+
+auth:
+  # see https://backstage.io/docs/auth/ to learn about auth providers
+  providers:
+    # See https://backstage.io/docs/auth/guest/provider
+    guest: {}
+
+scaffolder:
+  # see https://backstage.io/docs/features/software-templates/configuration for software template options
+
+catalog:
+  import:
+    entityFilename: catalog-info.yaml
+    pullRequestBranchName: backstage-integration
+  rules:
+    - allow: [Component, System, API, Resource, Location]
+  locations:
+    # Local example data, file locations are relative to the backend process, typically `packages/backend`
+    - type: file
+      target: ../../examples/entities.yaml
+
+    # Local example template
+    - type: file
+      target: ../../examples/template/template.yaml
+      rules:
+        - allow: [Template]
+
+    # Local example organizational data
+    - type: file
+      target: ../../examples/org.yaml
+      rules:
+        - allow: [User, Group]
+
+    ## Uncomment these lines to add more example data
+    # - type: url
+    #   target: https://github.com/backstage/backstage/blob/master/packages/catalog-model/examples/all.yaml
+
+    ## Uncomment these lines to add an example org
+    # - type: url
+    #   target: https://github.com/backstage/backstage/blob/master/packages/catalog-model/examples/acme-corp.yaml
+    #   rules:
+    #     - allow: [User, Group]
+
+# see https://backstage.io/docs/permissions/getting-started for more on the permission framework
+permission:
+  # setting this to `false` will disable permissions
+  enabled: true

workspaces/npm/backstage.json

@@ -0,0 +1,3 @@
+{
+  "version": "1.31.1"
+}

workspaces/npm/catalog-info.yaml

@@ -0,0 +1,10 @@
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: backstage-plugin-npm-workspace
+  title: 'Backstage Community Npm Plugin'
+  description: A Backstage plugin that shows meta info and latest versions from a npm registry
+spec:
+  lifecycle: experimental
+  type: backstage-plugin
+  owner: maintainers

workspaces/npm/examples/entities.yaml

@@ -0,0 +1,132 @@
+---
+# https://backstage.io/docs/features/software-catalog/descriptor-format#kind-system
+apiVersion: backstage.io/v1alpha1
+kind: System
+metadata:
+  name: backstage
+spec:
+  owner: guests
+---
+# https://backstage.io/docs/features/software-catalog/descriptor-format#kind-component
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: backstage-catalog-model
+  annotations:
+    npm/package: '@backstage/catalog-model'
+spec:
+  type: library
+  lifecycle: production
+  owner: guests
+  system: backstage
+---
+# https://backstage.io/docs/features/software-catalog/descriptor-format#kind-component
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: backstage-catalog-client
+  annotations:
+    npm/package: '@backstage/catalog-client'
+spec:
+  type: library
+  lifecycle: production
+  owner: guests
+  system: backstage
+  dependsOn:
+    - component:backstage-catalog-model
+---
+# https://backstage.io/docs/features/software-catalog/descriptor-format#kind-component
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: backstage-plugin-catalog-common
+  annotations:
+    npm/package: '@backstage/plugin-catalog-common'
+spec:
+  type: library
+  lifecycle: production
+  owner: guests
+  system: backstage
+  dependsOn:
+    - component:backstage-catalog-model
+---
+# https://backstage.io/docs/features/software-catalog/descriptor-format#kind-component
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: backstage-plugin-catalog-node
+  annotations:
+    npm/package: '@backstage/plugin-catalog-node'
+spec:
+  type: library
+  lifecycle: production
+  owner: guests
+  system: backstage
+  dependsOn:
+    - component:backstage-catalog-model
+---
+# https://backstage.io/docs/features/software-catalog/descriptor-format#kind-component
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: backstage-plugin-catalog-react
+  annotations:
+    npm/package: '@backstage/plugin-catalog-react'
+spec:
+  type: library
+  lifecycle: production
+  owner: guests
+  system: backstage
+  dependsOn:
+    - component:backstage-catalog-model
+    - component:backstage-catalog-client
+    - component:backstage-plugin-catalog-common
+---
+# https://backstage.io/docs/features/software-catalog/descriptor-format#kind-component
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: backstage-plugin-catalog
+  annotations:
+    npm/package: '@backstage/plugin-catalog'
+spec:
+  type: website
+  lifecycle: production
+  owner: guests
+  system: backstage
+  dependsOn:
+    - component:backstage-catalog-model
+    - component:backstage-catalog-client
+    - component:backstage-plugin-catalog-common
+    - component:backstage-plugin-catalog-react
+---
+# https://backstage.io/docs/features/software-catalog/descriptor-format#kind-component
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: backstage-plugin-catalog-backend
+  annotations:
+    npm/package: '@backstage/plugin-catalog-backend'
+spec:
+  type: service
+  lifecycle: production
+  owner: guests
+  system: backstage
+  dependsOn:
+    - component:backstage-catalog-model
+    - component:backstage-catalog-client
+    - component:backstage-plugin-catalog-common
+    - component:backstage-plugin-catalog-node
+---
+# https://backstage.io/docs/features/software-catalog/descriptor-format#kind-component
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: npm-package-not-found
+  annotations:
+    npm/package: npm-package-not-found
+spec:
+  type: service
+  lifecycle: testing
+  owner: guests
+  system: backstage