+LibVerPage + components redesign

Vity01 · Dec 5, 2023 · 16be1e0 · 16be1e0
1 parent b381d6e
commit 16be1e0
Show file tree

Hide file tree

Showing 13 changed files with 274 additions and 208 deletions.
diff --git a/README.md b/README.md
@@ -16,6 +16,7 @@ Nowadays, the plugin supports these package managers types in JFrog: Maven, Grad
   - [Configuration](#configuration)
     - [Support for scaffolding](#support-for-scaffolding) 
   - [How it works](#how-it-works)
+  - [Changes](#changes)
   - [Contributing](#contributing)
     - [Development](#development)
   - [Future plans](#future-plans)
@@ -34,27 +35,67 @@ yarn add --cwd packages/app backstage-plugin-jfrog-artifactory-libs
 
 ## Integration
 
-Once you've installed the plugin, you'll need to integrate it into your Backstage app. To do so, you'll need to:
+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:
 
-Add the LibArtifactCard component to the `EntityPage.tsx` in your app:
+### JFrogLibArtifactCard
+Add the JFrogLibArtifactCard component to the `EntityPage.tsx` in your app:
 
 ```typescript jsx
-import {LibArtifactCard, 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}>
-                <LibArtifactCard/>
+                <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)
+
+```typescript jsx
+const routes = (
+  <FlatRoutes>
+    //....
+    <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';
+//....
+
+        <ExploreLayout
+                title={`Explore the ${organizationName} ecosystem`}
+                subtitle="Discover solutions available in your ecosystem"
+        >
+              // ...
+          <ExploreLayout.Route path="libver" title="Libraries">
+            <JFrogLibVerPageContent />
+            />
+          </ExploreLayout.Route>
+          //  ...
+        </ExploreLayout>
+
+    // ...
+);
+```
+
 ### App-config.yaml
 Set up a proxy for the JFrog API by adding the following configuration to your `app-config.yaml` file:
 
@@ -83,16 +124,15 @@ Artifact details are correlated to Backstage entities using an annotation added
 
 ```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` 
+    # -- 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` 
 
 ```
 
@@ -102,17 +142,16 @@ 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'
+    # -- 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)
 
 ## Configuration
 
-`LibArtifactCard` has following default properties:
+`JFrogLibArtifactCard` has following default properties:
 
 ```typescript typescript jsx
 LibArtifactCard.defaultProps = {
@@ -126,6 +165,8 @@ LibArtifactCard.defaultProps = {
     // 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
+    // which link to open
+    browseLink: browseLinkDefault,
 };
 
 ```
@@ -138,6 +179,11 @@ It also adds a new extension UI component called `ArtifactRepositoryPicker` for
 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
+
 ## Contributing
 
 Don't hesitate to contribute to the plugin. This is my first TypeScript/React/Backstage product so please be gentle to
@@ -151,7 +197,8 @@ Copy plugin content into your `plugins` directory, and add a dependency into app
 
 - More tests
 - More package managers support
-- multiple artifactories instances?
+- Multiple artifacts defined in one entity
+- Multiple artifactories instances?
 
 ## License
 

diff --git a/dev/index.tsx b/dev/index.tsx
@@ -14,17 +14,14 @@
  * limitations under the License.
  */
 import React from 'react';
-import { createDevApp } from '@backstage/dev-utils';
-import {
-  jfrogArtifactoryLibsPlugin,
-  JfrogArtifactoryLibsPage,
-} from '../src/plugin';
+import {createDevApp} from '@backstage/dev-utils';
+import {JFrogArtifactoryLibsPage, jfrogArtifactoryLibsPlugin} from '../src';
 
 createDevApp()
   .registerPlugin(jfrogArtifactoryLibsPlugin)
   .addPage({
-    element: <JfrogArtifactoryLibsPage />,
+    element: <JFrogArtifactoryLibsPage />,
     title: 'Root Page',
-    path: '/jfrog-artifactory-libs',
+    path: '/jfrog-artifactory-libs'
   })
   .render();
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "backstage-plugin-jfrog-artifactory-libs",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "license": "Apache-2.0",
@@ -49,32 +49,39 @@
     "bump": "yarn run standard-version --no-verify --releaseCommitMessageFormat 'v{{currentTag}}'"
   },
   "dependencies": {
-    "@backstage/core-components": "^0.13.2",
-    "@backstage/plugin-catalog": "^1.11.2",
-    "@backstage/core-plugin-api": "^1.5.2",
-    "@backstage/plugin-scaffolder": "^1.14.0",
-    "@backstage/theme": "^0.4.0",
+    "@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",
     "@material-ui/core": "^4.9.13",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.60",
+    "@types/pluralize": "^0.0.33",
+    "lodash": "^4.17.21",
     "react-use": "^17.2.4"
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.2.0"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.22.8",
-    "@backstage/core-app-api": "^1.8.1",
-    "@backstage/dev-utils": "^1.0.16",
-    "@backstage/test-utils": "^1.4.0",
+    "@backstage/cli": "^0.22.12",
+    "@backstage/core-app-api": "^1.9.1",
+    "@backstage/dev-utils": "^1.0.20",
+    "@backstage/test-utils": "^1.4.2",
+    "@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/node": "*",
-    "@spotify/prettier-config": "^14.1.6",
-    "prettier": "^2.2.1",
-    "msw": "^1.0.0",
     "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"
   },

diff --git a/src/components/ArtifactRepositoryPicker/ArtifactRepositoryPicker.tsx b/src/components/ArtifactRepositoryPicker/ArtifactRepositoryPicker.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 /*
  * Copyright 2021 The Backstage Authors
  *
@@ -24,7 +25,7 @@ import useAsync from 'react-use/lib/useAsync';
 import { RepositoryPickerProps, RepositoryPickerUiOptions } from './schema';
 import { configApiRef, useApi } from '@backstage/core-plugin-api';
 import { DEFAULT_PROXY_PATH } from '../LibArtifactCard';
-import {getErrorMessage} from "../LibArtifactCard/api";
+import { getErrorMessage } from '../LibArtifactCard/api';
 
 export { ArtifactRepositoryPickerSchema } from './schema';
 
@@ -34,7 +35,9 @@ export { ArtifactRepositoryPickerSchema } from './schema';
  *
  * @public
  */
-export const ArtifactRepositoryPicker = (props: RepositoryPickerProps) => {
+export const ArtifactRepositoryPicker: (
+  props: RepositoryPickerProps,
+) => React.JSX.Element = (props: RepositoryPickerProps) => {
   const {
     onChange,
     schema: { title = 'Artifact repository', description = 'Repository key' },
@@ -63,7 +66,7 @@ export const ArtifactRepositoryPicker = (props: RepositoryPickerProps) => {
     const response = await fetch(url);
     if (response.status !== 200) {
       throw new Error(
-        `Cannot get repositories list - ` + (await getErrorMessage(response)),
+        `Cannot get repositories list - ${await getErrorMessage(response)}`,
       );
     }
 

diff --git a/src/components/ArtifactRepositoryPicker/index.ts b/src/components/ArtifactRepositoryPicker/index.ts
@@ -18,3 +18,5 @@ export {
   type RepositoryPickerUiOptions,
 } from './schema';
 export { ArtifactRepositoryPicker } from './ArtifactRepositoryPicker';
+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,7 @@
  * limitations under the License.
  */
 import { z } from 'zod';
-import { makeFieldSchemaFromZod } from '@backstage/plugin-scaffolder';
+import {CustomFieldExtensionSchema, makeFieldSchemaFromZod} from '@backstage/plugin-scaffolder';
 
 /**
  * @public
@@ -97,7 +97,7 @@ export type RepositoryPickerUiOptions =
 
 export type RepositoryPickerProps = typeof RepositoryPickerFieldSchema.type;
 
-export const ArtifactRepositoryPickerSchema =
+export const ArtifactRepositoryPickerSchema: CustomFieldExtensionSchema =
   RepositoryPickerFieldSchema.schema;
 
 export type RepositoryPickerFilterQuery = z.TypeOf<