yarn support (#8)

* yarn support Signed-off-by: Ladislav Vitásek <[email protected]> * build fix #1 Signed-off-by: Ladislav Vitásek <[email protected]> --------- Signed-off-by: Ladislav Vitásek <[email protected]>
Vity01 · Oct 14, 2024 · eb31516 · eb31516
1 parent cdce5ad
commit eb31516
Show file tree

Hide file tree

Showing 19 changed files with 389 additions and 312 deletions.
diff --git a/README.md b/README.md
@@ -1,20 +1,20 @@
 # Backstage JFrog artifactory libraries plugin
-
-The Backstage `jfrog-artifactory-libs` frontend plugin provides a simple way to display generated artifact (library)
-details like - group, artifact, repository, what is the latest version, and it simply allows to copy library definition
-for the package managers.   
-Nowadays, the plugin supports these package managers types in JFrog: Maven, Gradle, Sbt, Pypi, Docker.
+  The Backstage `jfrog-artifactory-libs` frontend plugin uses the JFrog Artifactory APIs to fetch details about artifacts (libraries)
+  and displays these details in the Backstage app, allowing users to view information about the artifact, such as the group,
+  artifact, repository, the latest version, and it also allows to copy library definition for the package managers. The plugin
+  supports these package managers types in JFrog: Maven, Gradle, Sbt, Pypi, Docker, NPM, Yarn, Nuget.
 
 
 ![Demo](./doc/artifact.gif)
 
 <!-- TOC -->
 
 - [Backstage jfrog-artifactory-libs plugin](#backstage-xkcd-plugin)
+  - [Authentication](#authentication)
   - [Installation](#installation)
   - [Integration](#integration)
   - [Configuration](#configuration)
-    - [Support for scaffolding](#support-for-scaffolding) 
+    - [Support for scaffolding](#support-for-scaffolding)
   - [How it works](#how-it-works)
   - [Changes](#changes)
   - [Contributing](#contributing)
@@ -23,6 +23,12 @@ Nowadays, the plugin supports these package managers types in JFrog: Maven, Grad
   - [License](#license)
   <!-- TOC -->
 
+## Authentication:
+
+- The jfrog-artifactory-libs plugin does not directly handle authentication. Instead, it relies on [Backstage basic HTTP proxy package](https://backstage.io/docs/plugins/proxying/)
+  which is configured to forward requests to JFrog Artifactory instance.
+
+
 ## Installation
 
 To install the plugin, you'll need to add it to your Backstage app's dependencies using either Yarn or NPM.
@@ -38,26 +44,32 @@ yarn add --cwd packages/app backstage-plugin-jfrog-artifactory-libs
 Once you've installed the plugin, you'll need to integrate it into your Backstage app. To do so, you'll need to following code into your BS instance:
 
 ### JFrogLibArtifactCard
+
 Add the JFrogLibArtifactCard component to the `EntityPage.tsx` in your app:
 
 ```typescript jsx
-import {JFrogLibArtifactCard, isJfrogArtifactAvailable} from 'backstage-plugin-jfrog-artifactory-libs';
+import {
+  JFrogLibArtifactCard,
+  isJfrogArtifactAvailable,
+} from 'backstage-plugin-jfrog-artifactory-libs';
 //....
 const overviewContent = (
-// ...
-    <EntitySwitch>
-        //...
-        <EntitySwitch.Case if={isJfrogArtifactAvailable}>
-            <Grid item md={4}>
-                <JFrogLibArtifactCard/>
-            </Grid>
-        </EntitySwitch.Case>
-        //...
-    </EntitySwitch>
-    // ...
+  // ...
+  <EntitySwitch>
+    //...
+    <EntitySwitch.Case if={isJfrogArtifactAvailable}>
+      <Grid item md={4}>
+        <JFrogLibArtifactCard />
+      </Grid>
+    </EntitySwitch.Case>
+    //...
+  </EntitySwitch>
+  // ...
 );
 ```
+
 ### JFrogLibVerPage
+
 If you want to browse libraries you can enable this component in your `App.tsx` file. It shows all component entities containing `jfrog.com/artifactory-artifact` attribute.
 
 ![Demo](./doc/libs.gif)
@@ -66,16 +78,20 @@ If you want to browse libraries you can enable this component in your `App.tsx`
 const routes = (
   <FlatRoutes>
     //....
-    <Route path="/libver" element={<JFrogLibVerPage topComponents={<DefineNewLibraryButton />} />}>
-    </Route>
+    <Route
+      path="/libver"
+      element={<JFrogLibVerPage topComponents={<DefineNewLibraryButton />} />}
+    ></Route>
     //....
   </FlatRoutes>
 );
 ```
 
 
 ### Explore page - JFrogLibVerPageContent
+
 This is a subcomponent of `JFrogLibVerPage` component. It's possible to integrate it for instance into your Explore page.
+
 ```typescript jsx
 import { JFrogLibVerPageContent } from 'backstage-plugin-jfrog-artifactory-libs';
 //....
@@ -100,13 +116,13 @@ import { JFrogLibVerPageContent } from 'backstage-plugin-jfrog-artifactory-libs'
 Set up a proxy for the JFrog API by adding the following configuration to your `app-config.yaml` file:
 
 ```yaml
-  '/artifactory-proxy/':
-    target: 'https://your-jfrog-artifactory-instance.com'
-    headers:
-      # if you use Jfrog instance for anonymous user token is not required, but it is also required for Docker package type
-      Authorization: Bearer ${ARTIFACTORY_TOKEN}
-      X-Result-Detail: 'properties'
-      Accept: '*'
+'/artifactory-proxy/':
+  target: 'https://your-jfrog-artifactory-instance.com'
+  headers:
+    # if you use Jfrog instance for anonymous user token is not required, but it is also required for Docker package type
+    Authorization: Bearer ${ARTIFACTORY_TOKEN}
+    X-Result-Detail: 'properties'
+    Accept: '*'
 ```
 
 You have to also reference your artifactory URL (used for UI browse links) and your proxy configuration.
@@ -115,38 +131,42 @@ You have to also reference your artifactory URL (used for UI browse links) and y
 jfrog:
   artifactory:
     url: 'https://your-jfrog-artifactory-instance.com'
-    proxyPath: '/artifactory-proxy/' # optional, /artifactory-proxy/ is default value 
+    proxyPath: '/artifactory-proxy/' # optional, /artifactory-proxy/ is default value
 ```
 
 ### Catalog-info.yaml
 
 Artifact details are correlated to Backstage entities using an annotation added in the entity's catalog-info.yaml file.
 
 ```yaml
-  metadata:
-    annotations:
-      # -- required values --
-      jfrog.com/artifactory-artifact: 'artifact-name'
-      jfrog.com/artifactory-repo: 'maven-local'
-
-      jfrog.com/artifactory-group: 'com.mycompany' # optional string - can be blank for pypi, necessary for Maven repos
-
-      # -- optional values --
-      jfrog.com/artifactory-scope: 'compile' # optional string, one of these [compile, test,provided,runtime,classpath,optional]
-      jfrog.com/artifactory-packaging: 'aar' #optional string, eg. `aar` 
-
+#...
+metadata:
+  annotations:
+    # -- required values --
+    jfrog.com/artifactory-artifact: 'artifact-name'
+    jfrog.com/artifactory-repo: 'maven-local'
+
+    jfrog.com/artifactory-group: 'com.mycompany' # optional string - can be blank for pypi, necessary for Maven repos
+
+    # -- optional values --
+    jfrog.com/artifactory-scope: 'compile' # optional string, one of these [compile, test,provided,runtime,classpath,optional]
+    jfrog.com/artifactory-packaging: 'aar' #optional string, eg. `aar`
+#...
 ```
 
 And that's it! The plugin should now be integrated into your Backstage app, and you should see the Artifact card when
 you navigate to the entity page where it's included.
 
 For a docker image you define repository and artifact name. Both formats are supported:
+
 ```yaml
-  metadata:
-    annotations:
-      # -- required values --
-      jfrog.com/artifactory-artifact: 'docker.mydomain.com/mygroup/my/artifact-name' # or simply 'mygroup/my/artifact-name' 
-      jfrog.com/artifactory-repo: 'docker-local'
+#...
+metadata:
+  annotations:
+    # -- required values --
+    jfrog.com/artifactory-artifact: 'docker.mydomain.com/mygroup/my/artifact-name' # or simply 'mygroup/my/artifact-name'
+    jfrog.com/artifactory-repo: 'docker-local'
+#...
 ```
 
 ![Demo](./doc/dockerfile.gif)
@@ -163,28 +183,33 @@ LibArtifactCard.defaultProps = {
     showMaven: true, // whether to  show Maven package manager tab
     showSbt: true, // whether to  show Sbt package manager tab
     showPip: true, // whether to  show Pip package manager tab
+    showYarn: true, // whether to show Yarn package manager tab
     showDockerfile: true, // whether to  show Dockerfile tab
     // it hides Maven and Gradle tabs if the current repository package type is `PyPi`
     autohideTabs: true,
-    showBrowseRepositoryLink: true // whether to show Browse to URL deep link under bottom of the Card
+    showBrowseRepositoryLink: true, // whether to show Browse to URL deep link under bottom of the Card
     // which link to open
     browseLink: browseLinkDefault,
 };
 
 ```
+
 ### Support for scaffolding
+
 In [this document](./doc/SCAFFOLDING.md) you can find detailed information how to integrate this plugin into scaffolding templates.
-It also adds a new extension UI component called `ArtifactRepositoryPicker` for interactive repository selection. 
+It also adds a new extension UI component called `ArtifactRepositoryPicker` for interactive repository selection.
 
 ## How it works
 
 Plugin uses JFrog APIs to find latest version. It's necessary to specify `ARTIFACTORY_TOKEN` in the `app-config.yaml`
 file if you don't allow to access API for anonymous user.
 
-## Changes 
-Version 1.0.9 
- - JFrogLibVerPageContent and JFrogLibVerPage components added
- - (!) renamed LibArtifactCard into JFrogLibArtifactCard
+## Changes
+
+Version 1.0.9
+
+- JFrogLibVerPageContent and JFrogLibVerPage components added
+- (!) renamed LibArtifactCard into JFrogLibArtifactCard
 
 ## Contributing
 

diff --git a/package.json b/package.json
@@ -4,7 +4,6 @@
   "main": "src/index.ts",
   "types": "src/index.ts",
   "license": "Apache-2.0",
-  "private": false,
   "publishConfig": {
     "access": "public",
     "main": "dist/index.esm.js",
@@ -31,6 +30,7 @@
       "src/components/types.ts"
     ]
   },
+  "sideEffects": false,
   "scripts": {
     "start": "backstage-cli package start",
     "dev": "concurrently \"yarn start\" \"yarn start-backend\"",
@@ -49,40 +49,42 @@
     "bump": "yarn run standard-version --no-verify --releaseCommitMessageFormat 'v{{currentTag}}'"
   },
   "dependencies": {
-    "@backstage/core-components": "^0.13.4",
-    "@backstage/plugin-catalog-react": "^1.8.3",
-    "@backstage/catalog-model": "^1.4.1",
-    "@backstage/core-plugin-api": "^1.5.3",
-    "@backstage/plugin-catalog": "^1.12.4",
-    "@backstage/plugin-scaffolder": "^1.14.4",
-    "@backstage/plugin-scaffolder-react": "^1.6.1",
-    "@backstage/theme": "^0.4.1",
+    "@backstage/catalog-model": "^1.7.0",
+    "@backstage/config": "^1.2.0",
+    "@backstage/core-components": "^0.15.0",
+    "@backstage/core-plugin-api": "^1.9.4",
+    "@backstage/plugin-catalog": "^1.23.1",
+    "@backstage/plugin-catalog-react": "^1.13.1",
+    "@backstage/plugin-scaffolder": "^1.25.1",
+    "@backstage/plugin-scaffolder-react": "^1.12.1",
+    "@backstage/types": "^1.1.1",
     "@material-ui/core": "^4.9.13",
-    "@material-ui/icons": "^4.9.1",
-    "@material-ui/lab": "^4.0.0-alpha.60",
+    "@material-ui/lab": "^4.0.0-alpha.61",
     "@types/pluralize": "^0.0.33",
     "lodash": "^4.17.21",
-    "react-use": "^17.2.4"
+    "pluralize": "^8.0.0",
+    "react-use": "^17.2.4",
+    "zod": "^3.23.8"
   },
   "peerDependencies": {
-    "react": "^16.13.1 || ^17.2.0"
+    "react": "^16.13.1 || ^17.2.0",
+    "react-router": "6.0.0-beta.0 || ^6.3.0"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.22.12",
-    "@backstage/core-app-api": "^1.9.1",
-    "@backstage/dev-utils": "^1.0.20",
-    "@backstage/test-utils": "^1.4.2",
+    "@backstage/cli": "^0.27.1",
+    "@backstage/core-app-api": "^1.15.0",
+    "@backstage/dev-utils": "^1.1.1",
+    "@backstage/test-utils": "^1.6.0",
     "@spotify/prettier-config": "^14.1.6",
     "@testing-library/jest-dom": "^5.10.1",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^14.0.0",
+    "@types/lodash": "^4.14.202",
     "@types/node": "*",
+    "@types/pluralize": "^0.0.33",
     "cross-fetch": "^3.1.5",
     "msw": "^1.0.0",
-    "@types/pluralize": "^0.0.33",
-    "@types/lodash": "^4.14.202",
     "prettier": "^2.2.1",
-    "react-router": "6.0.0-beta.0",
     "standard-version": "^9.5.0"
   },
   "prettier": "@spotify/prettier-config",

diff --git a/src/components/ArtifactRepositoryPicker/index.ts b/src/components/ArtifactRepositoryPicker/index.ts
@@ -18,5 +18,5 @@ export {
   type RepositoryPickerUiOptions,
 } from './schema';
 export { ArtifactRepositoryPicker } from './ArtifactRepositoryPicker';
-export type * from './ArtifactRepositoryPicker'
-export type * from './schema'
+export type * from './ArtifactRepositoryPicker';
+export type * from './schema';
diff --git a/src/components/ArtifactRepositoryPicker/schema.ts b/src/components/ArtifactRepositoryPicker/schema.ts
@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 import { z } from 'zod';
-import {CustomFieldExtensionSchema, makeFieldSchemaFromZod} from '@backstage/plugin-scaffolder';
+import { makeFieldSchemaFromZod } from '@backstage/plugin-scaffolder';
+import { CustomFieldExtensionSchema } from '@backstage/plugin-scaffolder-react';
 
 /**
  * @public

diff --git a/src/components/LibArtifactCard/LibArtifactCard.tsx b/src/components/LibArtifactCard/LibArtifactCard.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { configApiRef, identityApiRef, useApi } from '@backstage/core-plugin-api';
+import { configApiRef, fetchApiRef, useApi } from '@backstage/core-plugin-api';
 import { ResponseErrorPanel } from '@backstage/core-components';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { LibArtifactCardProps } from '../../types';
@@ -13,16 +13,16 @@ import { ArtifactInfo } from './api';
 export const DEFAULT_PROXY_PATH = '/artifactory-proxy/';
 export const LibArtifactCard = (props: LibArtifactCardProps) => {
   const config = useApi(configApiRef);
+  const fetchApi = useApi(fetchApiRef);
   const { entity } = useEntity<Entity>();
-  const identity = useApi (identityApiRef);
 
   const artifactoryUrl = config.getString('jfrog.artifactory.url');
 
   checkAnnotationsPresent(entity);
 
   const { value, loading, error } = useAsync(async () => {
     try {
-      return await libraryInfo(entity, config, identity);
+      return await libraryInfo(entity, config, fetchApi);
     } catch (e) {
       if (!(e instanceof Error)) {
         throw new Error(e as string);
@@ -65,6 +65,9 @@ LibArtifactCard.defaultProps = {
   showMaven: true, // whether to  show Maven package manager tab
   showSbt: true, // whether to  show Sbt package manager tab
   showPip: true, // whether to  show Pip package manager tab
+  showNpm: true, // whether to  show Npm package manager tab
+  showYarn: true, // whether to  show Npm package manager tab
+  showNuget: true, // whether to  show Nuget package manager tab
   showDockerfile: true, // whether to  show Dockerfile tab
   // it hides Maven and Gradle tabs if the current repository package type is `PyPi`
   autohideTabs: true,