@axis-backstage/plugin-readme 0.16.0 → 0.17.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @axis-backstage/plugin-readme
 
+## 0.17.0
+
+### Minor Changes
+
+- 798d14d: Added support for new frontend system
+
 ## 0.16.0
 
 ### Minor Changes

package/README.md

@@ -10,7 +10,7 @@ The `Readme-plugin` enables easy access and viewing of the README file. By havin
 
 The plugin **supports all ScmIntegrations**, like Gerrit & GitLab. This makes it possible for organizations with many Source Code Integrations to use the same plugin.
 
-It also supports various file extentions such as README.md, README.MD, README.txt, README, and README.rst.
+It also supports various file extensions such as README.md, README.MD, README.txt, README, and README.rst.
 
 ### Where can the plugin find my README file?
 
@@ -80,6 +80,45 @@ const defaultEntityPage = (
 )
 ```
 
+### New Frontend System
+
+1. First, install the plugin into your app:
+
+```bash
+# From your Backstage root directory
+yarn --cwd packages/app add @axis-backstage/plugin-readme
+```
+
+2. If [feature discovery](https://backstage.io/docs/frontend-system/architecture/app/#feature-discovery) is enabled in your app, the plugin will be automatically discovered and added to the entity page. If not, you can manually add the plugin to your app:
+
+```tsx
+// packages/app/src/App.tsx
+// ...
+import readmePlugin from '@axis-backstage/plugin-readme/alpha';
+
+const app = createApp({
+  features: [
+    // ...
+    readmePlugin,
+  ],
+});
+```
+
+3. If necessary, you can also customize the plugin:
+
+```yaml
+# app-config.yaml
+app:
+  # ...
+  extensions:
+    # ...
+    - entity-card:readme:
+        config:
+          filter:
+            kind: component
+# ...
+```
+
 ## Layout
 
 The readme card is located in the overview page on the entity page. From the card header it is also possible to open a dialog displaying the full README.md.

package/dist/alpha.d.ts

@@ -0,0 +1,52 @@
+/// <reference types="react" />
+import * as _backstage_catalog_model from '@backstage/catalog-model';
+import * as react from 'react';
+import * as _backstage_plugin_catalog_react_alpha from '@backstage/plugin-catalog-react/alpha';
+import * as _backstage_frontend_plugin_api from '@backstage/frontend-plugin-api';
+import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
+
+/**
+ * Frontend plugin that fetches and displays the readme for an entity
+ *
+ * @packageDocumentation
+ */
+declare const _default: _backstage_frontend_plugin_api.OverridableFrontendPlugin<{}, {}, {
+    "api:readme": _backstage_frontend_plugin_api.ExtensionDefinition<{
+        kind: "api";
+        name: undefined;
+        config: {};
+        configInput: {};
+        output: _backstage_frontend_plugin_api.ExtensionDataRef<_backstage_core_plugin_api.AnyApiFactory, "core.api.factory", {}>;
+        inputs: {};
+        params: <TApi, TImpl extends TApi, TDeps extends {
+            [x: string]: unknown;
+        }>(params: _backstage_core_plugin_api.ApiFactory<TApi, TImpl, TDeps>) => _backstage_frontend_plugin_api.ExtensionBlueprintParams<_backstage_core_plugin_api.AnyApiFactory>;
+    }>;
+    "entity-card:readme": _backstage_frontend_plugin_api.ExtensionDefinition<{
+        kind: "entity-card";
+        name: undefined;
+        config: {
+            filter: _backstage_plugin_catalog_react_alpha.EntityPredicate | undefined;
+            type: "summary" | "content" | "info" | undefined;
+        };
+        configInput: {
+            filter?: _backstage_plugin_catalog_react_alpha.EntityPredicate | undefined;
+            type?: "summary" | "content" | "info" | undefined;
+        };
+        output: _backstage_frontend_plugin_api.ExtensionDataRef<react.JSX.Element, "core.reactElement", {}> | _backstage_frontend_plugin_api.ExtensionDataRef<(entity: _backstage_catalog_model.Entity) => boolean, "catalog.entity-filter-function", {
+            optional: true;
+        }> | _backstage_frontend_plugin_api.ExtensionDataRef<string, "catalog.entity-filter-expression", {
+            optional: true;
+        }> | _backstage_frontend_plugin_api.ExtensionDataRef<_backstage_plugin_catalog_react_alpha.EntityCardType, "catalog.entity-card-type", {
+            optional: true;
+        }>;
+        inputs: {};
+        params: {
+            loader: () => Promise<JSX.Element>;
+            filter?: _backstage_plugin_catalog_react_alpha.EntityPredicate | ((entity: _backstage_catalog_model.Entity) => boolean) | undefined;
+            type?: _backstage_plugin_catalog_react_alpha.EntityCardType | undefined;
+        };
+    }>;
+}>;
+
+export { _default as default };

package/dist/alpha.esm.js

@@ -0,0 +1,29 @@
+import { jsx } from 'react/jsx-runtime';
+import { ApiBlueprint, identityApiRef, fetchApiRef, discoveryApiRef, createFrontendPlugin } from '@backstage/frontend-plugin-api';
+import { readmeApiRef } from './api/ReadmeApi.esm.js';
+import { ReadmeClient } from './api/ReadmeClient.esm.js';
+import { EntityCardBlueprint } from '@backstage/plugin-catalog-react/alpha';
+
+const readmeApi = ApiBlueprint.make({
+  params: (defineParams) => defineParams({
+    api: readmeApiRef,
+    deps: {
+      discoveryApi: discoveryApiRef,
+      fetchApi: fetchApiRef,
+      identityApi: identityApiRef
+    },
+    factory: ({ discoveryApi, fetchApi, identityApi }) => new ReadmeClient({ discoveryApi, fetchApi, identityApi })
+  })
+});
+const readmeCard = EntityCardBlueprint.make({
+  params: {
+    loader: async () => import('./components/ReadmeCard/index.esm.js').then((m) => /* @__PURE__ */ jsx(m.ReadmeCard, {}))
+  }
+});
+var alpha = createFrontendPlugin({
+  pluginId: "readme",
+  extensions: [readmeApi, readmeCard]
+});
+
+export { alpha as default };
+//# sourceMappingURL=alpha.esm.js.map

package/dist/alpha.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alpha.esm.js","sources":["../src/alpha.tsx"],"sourcesContent":["/**\n * Frontend plugin that fetches and displays the readme for an entity\n *\n * @packageDocumentation\n */\n\nimport {\n  ApiBlueprint,\n  createFrontendPlugin,\n  discoveryApiRef,\n  fetchApiRef,\n  identityApiRef,\n} from '@backstage/frontend-plugin-api';\nimport { readmeApiRef } from './api/ReadmeApi';\nimport { ReadmeClient } from './api/ReadmeClient';\nimport { EntityCardBlueprint } from '@backstage/plugin-catalog-react/alpha';\n\nconst readmeApi = ApiBlueprint.make({\n  params: defineParams =>\n    defineParams({\n      api: readmeApiRef,\n      deps: {\n        discoveryApi: discoveryApiRef,\n        fetchApi: fetchApiRef,\n        identityApi: identityApiRef,\n      },\n      factory: ({ discoveryApi, fetchApi, identityApi }) =>\n        new ReadmeClient({ discoveryApi, fetchApi, identityApi }),\n    }),\n});\n\nconst readmeCard = EntityCardBlueprint.make({\n  params: {\n    loader: async () =>\n      import('./components/ReadmeCard').then(m => <m.ReadmeCard />),\n  },\n});\n\nexport default createFrontendPlugin({\n  pluginId: 'readme',\n  extensions: [readmeApi, readmeCard],\n});\n"],"names":[],"mappings":";;;;;;AAiBA,MAAM,SAAA,GAAY,aAAa,IAAK,CAAA;AAAA,EAClC,MAAA,EAAQ,kBACN,YAAa,CAAA;AAAA,IACX,GAAK,EAAA,YAAA;AAAA,IACL,IAAM,EAAA;AAAA,MACJ,YAAc,EAAA,eAAA;AAAA,MACd,QAAU,EAAA,WAAA;AAAA,MACV,WAAa,EAAA;AAAA,KACf;AAAA,IACA,OAAS,EAAA,CAAC,EAAE,YAAA,EAAc,QAAU,EAAA,WAAA,EAClC,KAAA,IAAI,YAAa,CAAA,EAAE,YAAc,EAAA,QAAA,EAAU,aAAa;AAAA,GAC3D;AACL,CAAC,CAAA;AAED,MAAM,UAAA,GAAa,oBAAoB,IAAK,CAAA;AAAA,EAC1C,MAAQ,EAAA;AAAA,IACN,MAAA,EAAQ,YACN,OAAO,sCAAyB,CAAA,CAAE,IAAK,CAAA,CAAA,CAAA,qBAAM,GAAA,CAAA,CAAA,CAAE,UAAF,EAAA,EAAa,CAAE;AAAA;AAElE,CAAC,CAAA;AAED,YAAe,oBAAqB,CAAA;AAAA,EAClC,QAAU,EAAA,QAAA;AAAA,EACV,UAAA,EAAY,CAAC,SAAA,EAAW,UAAU;AACpC,CAAC,CAAA;;;;"}

package/package.json

@@ -1,8 +1,32 @@
 {
   "name": "@axis-backstage/plugin-readme",
-  "version": "0.16.0",
+  "version": "0.17.0",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.esm.js"
+    },
+    "./alpha": {
+      "backstage": "@backstage/FrontendPlugin",
+      "import": "./dist/alpha.esm.js",
+      "types": "./dist/alpha.d.ts",
+      "default": "./dist/alpha.esm.js"
+    },
+    "./package.json": "./package.json"
+  },
   "main": "dist/index.esm.js",
   "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "alpha": [
+        "dist/alpha.d.ts"
+      ],
+      "package.json": [
+        "package.json"
+      ]
+    }
+  },
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",
@@ -16,7 +40,10 @@
     "pluginPackages": [
       "@axis-backstage/plugin-readme",
       "@axis-backstage/plugin-readme-backend"
-    ]
+    ],
+    "features": {
+      "./alpha": "@backstage/FrontendPlugin"
+    }
   },
   "sideEffects": false,
   "scripts": {
@@ -30,9 +57,11 @@
   },
   "dependencies": {
     "@backstage/catalog-model": "^1.7.5",
+    "@backstage/core-compat-api": "^0.5.1",
     "@backstage/core-components": "^0.17.5",
     "@backstage/core-plugin-api": "^1.10.9",
     "@backstage/errors": "^1.2.7",
+    "@backstage/frontend-plugin-api": "^0.11.0",
     "@backstage/plugin-catalog-react": "^1.20.1",
     "@backstage/theme": "^0.6.8",
     "@mui/icons-material": "^5.15.7",
@@ -59,13 +88,6 @@
   "files": [
     "dist"
   ],
-  "typesVersions": {
-    "*": {
-      "package.json": [
-        "package.json"
-      ]
-    }
-  },
   "module": "./dist/index.esm.js",
   "directory": "_release/package"
 }