New Plugin: quay-backend (#2640)

* Add Quay backend plugin

The front end quay plugin will now use a backend plugin. This will
enable users to set permissions to secure the routes.

Signed-off-by: Bryan Ramos <[email protected]>

* Update changeset

Signed-off-by: Bryan Ramos <[email protected]>

* Update config retrival

uiUrl and apiKey are optional values.

Signed-off-by: Bryan Ramos <[email protected]>

* Add public repository slug to example entity

Signed-off-by: Bryan Ramos <[email protected]>

* Move QuayPage down to websiteEntityPage

Signed-off-by: Bryan Ramos <[email protected]>

* Add apiUrl, comments and keywords to Config

Signed-off-by: Bryan Ramos <[email protected]>

* Use apiUrl in the backend

Signed-off-by: Bryan Ramos <[email protected]>

* Update QuayService test to use apiUrl

Signed-off-by: Bryan Ramos <[email protected]>

* Generate knip-reports

Remove unused deps

Signed-off-by: Bryan Ramos <[email protected]>

* Add back proxy package

Allows local testing of the proxy

Signed-off-by: Bryan Ramos <[email protected]>

* Add solution to support Proxy or Quay-backend

Signed-off-by: Bryan Ramos <[email protected]>

---------

Signed-off-by: Bryan Ramos <[email protected]>

workspaces/quay/.changeset/brown-wasps-drive.md

@@ -0,0 +1,7 @@
+---
+'@backstage-community/plugin-scaffolder-backend-module-quay': minor
+'@backstage-community/plugin-quay-common': minor
+'@backstage-community/plugin-quay': minor
+---
+
+Adds a new quay-backend plugin and updates the frontend quay plugin to use this new backend.

workspaces/quay/.changeset/kind-knives-happen.md

@@ -0,0 +1,6 @@
+---
+'@backstage-community/plugin-quay-common': minor
+'@backstage-community/plugin-quay': minor
+---
+
+Add a quay-backend plugin to query the quay.io API

workspaces/quay/app-config.yaml

@@ -0,0 +1,65 @@
+app:
+  title: Quay Example App
+  baseUrl: http://localhost:3000
+  experimental:
+    packages: 'all'
+  extensions:
+    - entity-card:catalog/about
+    - entity-card:catalog/labels
+    - entity-card:catalog/links:
+        config:
+          filter: kind:component has:links
+
+organization:
+  name: Quay Example
+
+backend:
+  baseUrl: http://localhost:7007
+  listen:
+    port: 7007
+  csp:
+    connect-src: ["'self'", 'http:', 'https:']
+  cors:
+    origin: http://localhost:3000
+    methods: [GET, HEAD, PATCH, POST, PUT, DELETE]
+    credentials: true
+  database:
+    client: better-sqlite3
+    connection: ':memory:'
+
+integrations:
+  github:
+    - host: github.com
+      token: ${GITHUB_TOKEN}
+
+techdocs:
+  builder: 'local'
+  generator:
+    runIn: 'local'
+  publisher:
+    type: 'local'
+
+auth:
+  providers:
+    guest: {}
+
+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 organizational data
+    - type: file
+      target: ../../examples/org.yaml
+      rules:
+        - allow: [User, Group]
+
+quay:
+  uiUrl: 'https://quay.io'
+  apiKey: ''

workspaces/quay/examples/entities.yaml

@@ -0,0 +1,54 @@
+---
+# https://backstage.io/docs/features/software-catalog/descriptor-format#kind-system
+apiVersion: backstage.io/v1alpha1
+kind: System
+metadata:
+  name: examples
+spec:
+  owner: guests
+---
+# https://backstage.io/docs/features/software-catalog/descriptor-format#kind-component
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: quay-site
+  annotations:
+    quay.io/repository-slug: 'rhdh-community/rhdh'
+spec:
+  type: website
+  lifecycle: experimental
+  owner: guests
+  system: examples
+  providesApis: [example-grpc-api]
+---
+# https://backstage.io/docs/features/software-catalog/descriptor-format#kind-component
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: example-component
+spec:
+  type: website
+  lifecycle: experimental
+  owner: guests
+  system: examples
+---
+# https://backstage.io/docs/features/software-catalog/descriptor-format#kind-api
+apiVersion: backstage.io/v1alpha1
+kind: API
+metadata:
+  name: example-grpc-api
+spec:
+  type: grpc
+  lifecycle: experimental
+  owner: guests
+  system: examples
+  definition: |
+    syntax = "proto3";
+
+    service Exampler {
+      rpc Example (ExampleMessage) returns (ExampleMessage) {};
+    }
+
+    message ExampleMessage {
+      string example = 1;
+    };

workspaces/quay/examples/org.yaml

@@ -0,0 +1,17 @@
+---
+# https://backstage.io/docs/features/software-catalog/descriptor-format#kind-user
+apiVersion: backstage.io/v1alpha1
+kind: User
+metadata:
+  name: guest
+spec:
+  memberOf: [guests]
+---
+# https://backstage.io/docs/features/software-catalog/descriptor-format#kind-group
+apiVersion: backstage.io/v1alpha1
+kind: Group
+metadata:
+  name: guests
+spec:
+  type: team
+  children: []

workspaces/quay/package.json

@@ -6,6 +6,9 @@
     "node": "18 || 20"
   },
   "scripts": {
+    "dev": "yarn workspaces foreach -A --include backend --include app --parallel -v -i run start",
+    "start": "yarn workspace app start",
+    "start-backend": "yarn workspace backend sart",
     "tsc": "tsc",
     "tsc:full": "tsc --skipLibCheck true --incremental false",
     "build:all": "backstage-cli repo build --all",

workspaces/quay/packages/README.md

@@ -0,0 +1,9 @@
+# The Packages Folder
+
+This is where your own applications and centrally managed libraries live, each
+in a separate folder of its own.
+
+From the start there's an `app` folder (for the frontend) and a `backend` folder
+(for the Node backend), but you can also add more modules in here that house
+your core additions and adaptations, such as themes, common React component
+libraries, utilities, and similar.

workspaces/quay/packages/app/.eslintignore

@@ -0,0 +1 @@
+public

workspaces/quay/packages/app/.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);

workspaces/quay/packages/app/knip-report.md

@@ -0,0 +1,7 @@
+# Knip report
+
+## Unused dependencies (1)
+
+| Name                             | Location     | Severity |
+| :------------------------------- | :----------- | :------- |
+| @backstage-community/plugin-quay | package.json | error    |

workspaces/quay/packages/app/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "app",
+  "version": "0.0.0",
+  "private": true,
+  "bundled": true,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/backstage/community-plugins",
+    "directory": "workspaces/quay/packages/app"
+  },
+  "backstage": {
+    "role": "frontend"
+  },
+  "scripts": {
+    "start": "backstage-cli package start",
+    "build": "backstage-cli package build",
+    "clean": "backstage-cli package clean",
+    "test": "backstage-cli package test",
+    "lint": "backstage-cli package lint"
+  },
+  "dependencies": {
+    "@backstage-community/plugin-quay": "workspace:^",
+    "@backstage/app-defaults": "^1.5.16",
+    "@backstage/catalog-model": "^1.7.3",
+    "@backstage/cli": "^0.29.5",
+    "@backstage/core-app-api": "^1.15.4",
+    "@backstage/core-components": "^0.16.3",
+    "@backstage/core-plugin-api": "^1.10.3",
+    "@backstage/integration-react": "^1.2.3",
+    "@backstage/plugin-api-docs": "^0.12.3",
+    "@backstage/plugin-catalog": "^1.26.1",
+    "@backstage/plugin-catalog-common": "^1.1.3",
+    "@backstage/plugin-catalog-graph": "^0.4.15",
+    "@backstage/plugin-catalog-import": "^0.12.9",
+    "@backstage/plugin-catalog-react": "^1.15.1",
+    "@backstage/plugin-kubernetes": "^0.12.3",
+    "@backstage/plugin-org": "^0.6.35",
+    "@backstage/plugin-permission-react": "^0.4.30",
+    "@backstage/plugin-scaffolder": "^1.27.4",
+    "@backstage/plugin-search": "^1.4.22",
+    "@backstage/plugin-search-react": "^1.8.5",
+    "@backstage/plugin-techdocs": "^1.12.1",
+    "@backstage/plugin-techdocs-module-addons-contrib": "^1.1.20",
+    "@backstage/plugin-techdocs-react": "^1.2.13",
+    "@backstage/plugin-user-settings": "^0.8.18",
+    "@backstage/theme": "^0.6.3",
+    "@material-ui/core": "^4.12.2",
+    "@material-ui/icons": "^4.9.1",
+    "react": "^18.0.2",
+    "react-dom": "^18.0.2",
+    "react-router-dom": "^6.3.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@types/react-dom": "*"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "files": [
+    "dist"
+  ]
+}

workspaces/quay/packages/app/public/index.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Backstage is an open source framework for building developer portals"
+    />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link
+      rel="manifest"
+      href="<%= publicPath %>/manifest.json"
+      crossorigin="use-credentials"
+    />
+    <link rel="icon" href="<%= publicPath %>/favicon.ico" />
+    <link rel="shortcut icon" href="<%= publicPath %>/favicon.ico" />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="<%= publicPath %>/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="<%= publicPath %>/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="<%= publicPath %>/favicon-16x16.png"
+    />
+    <link
+      rel="mask-icon"
+      href="<%= publicPath %>/safari-pinned-tab.svg"
+      color="#5bbad5"
+    />
+    <title><%= config.getOptionalString('app.title') ?? 'Backstage' %></title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `yarn start`.
+      To create a production bundle, use `yarn build`.
+    -->
+  </body>
+</html>

workspaces/quay/packages/app/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "Backstage",
+  "name": "Backstage",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "48x48",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

workspaces/quay/packages/app/public/robots.txt

@@ -0,0 +1,2 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *

workspaces/quay/packages/app/src/App.test.tsx

@@ -0,0 +1,44 @@
+/*
+ * Copyright 2025 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 { render, waitFor } from '@testing-library/react';
+import React from 'react';
+import App from './App';
+
+describe('App', () => {
+  it('should render', async () => {
+    process.env = {
+      NODE_ENV: 'test',
+      APP_CONFIG: [
+        {
+          data: {
+            app: { title: 'Test' },
+            backend: { baseUrl: 'http://localhost:7007' },
+            techdocs: {
+              storageUrl: 'http://localhost:7007/api/techdocs/static/docs',
+            },
+          },
+          context: 'test',
+        },
+      ] as any,
+    };
+
+    const rendered = render(<App />);
+
+    await waitFor(() => {
+      expect(rendered.baseElement).toBeInTheDocument();
+    });
+  });
+});