Init

Author: hpatoio

.eslintrc.js

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

.github/workflows/ci.yml

@@ -0,0 +1,78 @@
+name: CI & Publish
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Run TypeScript checks
+        run: yarn tsc
+
+      - name: Lint the code
+        run: yarn lint
+
+      - name: Run tests
+        run: yarn test
+
+      - name: Build the plugin
+        run: yarn build
+
+      - name: Upload build artifacts
+        uses: actions/upload-artifact@v3
+        with:
+          name: backstage-plugin-build
+          path: |
+            .
+            !node_modules
+
+  publish:
+    needs: build
+    runs-on: ubuntu-latest
+    if: github.ref == 'refs/heads/main'
+    steps:
+      - name: Download build artifacts
+        uses: actions/download-artifact@v3
+        with:
+          name: backstage-plugin-build
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          registry-url: 'https://registry.npmjs.org/'
+
+      - name: Get package version
+        id: package
+        run: echo "version=$(jq -r .version package.json)" >> $GITHUB_ENV
+
+      - name: Publish to npm
+        run: yarn publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Create GitHub Release
+        uses: ncipollo/release-action@v1
+        with:
+          tag: v${{ env.version }}
+          name: Release v${{ env.version }}
+          body: "Automated release of version v${{ env.version }}"
+          draft: false
+          prerelease: false
+          token: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -0,0 +1,49 @@
+# Language info card
+
+Add a card component that add language info on the "Overview" page.
+
+<img alt="header" src="./images/overview-card.png" />
+
+# Getting started
+
+1. Install the plugin
+
+```
+yarn add @hpatoio/language-info
+```
+
+2. Modify your entity page
+
+Open `packages/app/src/components/catalog/EntityPage.tsx` and add
+
+```tsx
+import { EntityLanguageInfoCard } from '@internal/plugin-language-info';
+```
+
+then `EntityLanguageInfoCard` in `overviewContent`
+
+```tsx
+<Grid item md={6}>
+   <EntityLanguageInfoCard />
+</Grid>
+```
+
+2. Tag your component with the right tag
+
+For example if you want to extract the PHP version add `php` tag.
+
+```
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: dummy-prj
+  tags:
+    - foo
+    - php
+    - bar
+[...]
+```
+
+# Dependencies
+
+This plugin requires `plugin-language-info-backend`.

dev/index.tsx

@@ -0,0 +1,6 @@
+import { createDevApp } from '@backstage/dev-utils';
+import { languageInfoPlugin} from '../src/plugin';
+
+createDevApp()
+  .registerPlugin(languageInfoPlugin)
+  .render();

images/overview-card.png

@@ -0,0 +1,54 @@
+{
+  "name": "@hpatoio/plugin-language-info",
+  "version": "0.1.0",
+  "license": "Apache-2.0",
+  "private": true,
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "backstage": {
+    "role": "frontend-plugin"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "start": "backstage-cli package start",
+    "build": "backstage-cli package build",
+    "lint": "backstage-cli package lint",
+    "test": "backstage-cli package test",
+    "clean": "backstage-cli package clean",
+    "prepack": "backstage-cli package prepack",
+    "postpack": "backstage-cli package postpack"
+  },
+  "dependencies": {
+    "@backstage/core-components": "^0.16.4",
+    "@backstage/core-plugin-api": "^1.10.4",
+    "@backstage/plugin-catalog": "^1.27.0",
+    "@backstage/plugin-catalog-react": "^1.15.2",
+    "@backstage/theme": "^0.6.4",
+    "@material-ui/core": "^4.9.13",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.61",
+    "react-use": "^17.2.4"
+  },
+  "peerDependencies": {
+    "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@backstage/cli": "^0.30.0",
+    "@backstage/core-app-api": "^1.15.5",
+    "@backstage/dev-utils": "^1.1.7",
+    "@backstage/test-utils": "^1.7.5",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "msw": "^1.0.0",
+    "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
+  },
+  "files": [
+    "dist"
+  ]
+}

package.json

@@ -0,0 +1,45 @@
+import {
+  useEntity,
+} from '@backstage/plugin-catalog-react';
+import {
+  AboutField
+} from '@backstage/plugin-catalog';
+
+
+import React from 'react';
+
+import { Card, CardHeader, CardContent, Divider, Grid } from '@material-ui/core';
+
+
+/**
+ * Card for the catalog (entity page) that shows the language info
+ *
+ * @public
+ */
+export const EntityLanguageInfoCard = () => {
+
+  const { entity } = useEntity();
+   
+  return (
+    <Card className="gridItemCard">
+      <CardHeader
+        title='Language Info'
+      />
+      <Divider />
+      <CardContent className="gridItemCardContent">
+        <Grid container>
+          <AboutField
+            label='Language'
+            value={entity.metadata.annotations?.["language-info/name"]}
+            gridSizes={{ xs: 12, sm: 6, lg: 4 }}
+          />
+          <AboutField
+            label='Version'
+            value={entity.metadata.annotations?.["language-info/version"]}
+            gridSizes={{ xs: 12, sm: 6, lg: 4 }}
+          />
+        </Grid>
+      </CardContent>
+    </Card>
+  );
+};

src/components/EntityLanguageInfoCard.tsx

@@ -0,0 +1 @@
+export { languageInfoPlugin, EntityLanguageInfoCard } from './plugin';

src/index.ts

@@ -0,0 +1,7 @@
+import { languageInfoPlugin } from './plugin';
+
+describe('language-info', () => {
+  it('should export plugin', () => {
+    expect(languageInfoPlugin).toBeDefined();
+  });
+});

src/plugin.test.ts

@@ -0,0 +1,18 @@
+import {
+  createPlugin,
+  createComponentExtension,
+} from '@backstage/core-plugin-api';
+
+export const languageInfoPlugin = createPlugin({
+  id: 'language-info'
+});
+
+export const EntityLanguageInfoCard = languageInfoPlugin.provide(
+  createComponentExtension({
+    name: 'EntityLanguageInfoCard',
+    component: {
+      lazy: () =>
+        import('./components/EntityLanguageInfoCard').then(m => m.EntityLanguageInfoCard),
+    },
+  }),
+);