Merge pull request #46 from zalando/upgrade/backstage-1.39.0

Author: yousifalraheem

.eslintignore

@@ -0,0 +1,2 @@
+dev/**/*
+!dev/index.tsx

.github/workflows/npm-publish.yml

@@ -26,7 +26,7 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           registry-url: https://registry.npmjs.org/
           always-auth: true
         env:

.github/workflows/verify.yaml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20.x]
 
     steps:
       - uses: actions/checkout@v4

backstage.json

@@ -1,3 +1,3 @@
 {
-  "version": "1.8.3"
+  "version": "1.39.0"
 }

dev/index.tsx

@@ -1,9 +1,5 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import React from 'react';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { createDevApp } from '@backstage/dev-utils';
-import { APILinterPlugin } from '../src/plugin';
-import { APILinter } from '../src';
+import { APILinter, APILinterPlugin } from '../src';
 
 createDevApp()
   .registerPlugin(APILinterPlugin)

package.json

@@ -13,78 +13,82 @@
     "role": "frontend-plugin"
   },
   "dependencies": {
-    "@backstage/core-components": "^0.12.0",
-    "@backstage/core-plugin-api": "^1.0.5",
-    "@backstage/theme": "^0.2.13",
+    "@backstage/core-components": "^0.17.2",
+    "@backstage/core-plugin-api": "^1.10.7",
+    "@backstage/theme": "^0.6.6",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.57",
     "ace-builds": "^1.4.14",
     "brace": "^0.11.1",
-    "react": "^17.0.2",
     "react-ace": "^9.5.0",
-    "react-dom": "^17.0.2",
     "react-router-dom": "^6.4.5",
     "react-use": "^17.3.2",
-    "swagger-ui-react": "^4.12.0"
+    "swagger-ui-react": "^5.30.1"
   },
   "peerDependencies": {
-    "@backstage/core-components": "^0.12.0",
-    "@backstage/core-plugin-api": "^1.0.5",
-    "@backstage/theme": "^0.2.13",
+    "@backstage/core-components": "^0.17.2",
+    "@backstage/core-plugin-api": "^1.10.7",
+    "@backstage/theme": "^0.6.6",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
-    "@material-ui/lab": "4.0.0-alpha.57"
+    "@material-ui/lab": "4.0.0-alpha.57",
+    "react": "^18",
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.21.1",
-    "@backstage/core-app-api": "^1.2.0",
-    "@backstage/core-components": "^0.12.0",
-    "@backstage/core-plugin-api": "^1.0.5",
-    "@backstage/dev-utils": "^1.0.8",
-    "@backstage/test-utils": "^1.2.2",
-    "@backstage/theme": "^0.2.13",
+    "@backstage/cli": "^0.32.1",
+    "@backstage/core-app-api": "^1.17.0",
+    "@backstage/core-components": "^0.17.2",
+    "@backstage/core-plugin-api": "^1.10.7",
+    "@backstage/dev-utils": "^1.1.10",
+    "@backstage/test-utils": "^1.7.8",
+    "@backstage/theme": "^0.6.6",
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.57",
     "@semantic-release/github": "^10.3.5",
     "@semantic-release/npm": "^12.0.1",
-    "@spotify/prettier-config": "^15.0.0",
+    "@spotify/prettier-config": "*",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^12.1.3",
-    "@testing-library/user-event": "^13.1.8",
-    "@types/jest": "^29",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^30",
     "@types/node": "*",
-    "@types/react": "^17",
-    "@types/react-dom": "^17",
-    "@types/swagger-ui-react": "^4.1.1",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@types/swagger-ui-react": "^5.18.0",
     "commitizen": "^4.3.1",
     "concurrently": "^9.2.1",
     "cross-fetch": "^3.0.6",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint-plugin-jest": "^27",
+    "eslint": "^8.57.0",
+    "eslint-plugin-jest": "^29.0.1",
     "husky": "^8.0.1",
     "msw": "^0.35.0",
     "prettier": "^3.6.2",
     "pretty-quick": "^4.2.2",
-    "semantic-release": "19.0.2"
+    "react": "^18",
+    "react-dom": "^18",
+    "semantic-release": "^25.0.1"
   },
   "scripts": {
-    "start:backend": "yarn --cwd dev start",
     "postinstall": "husky install",
     "build": "backstage-cli package build",
     "start": "backstage-cli package start",
     "lint": "backstage-cli package lint",
     "test": "backstage-cli package test",
-    "dev": "concurrently \"yarn start\" \"yarn start:backend\"",
-    "tsc": "npx tsc",
-    "test:ci": "backstage-cli test --no-watch --silent --forceExit --detectOpenHandles --no-cache --coverage=false --runInBand",
     "diff": "backstage-cli plugin:diff",
     "prepack": "backstage-cli package prepack",
     "postpack": "backstage-cli package postpack",
     "clean": "backstage-cli package clean",
+    "start:backend": "yarn --cwd dev start",
+    "dev": "concurrently \"yarn start\" \"yarn start:backend\"",
+    "tsc": "npx tsc",
+    "test:ci": "backstage-cli package test --ci --no-watchman --no-watch --silent --no-cache --coverage=false",
     "format:all": "prettier \"**/*.{ts,tsx,js,jsx,json,md}\" --write",
     "format:check": "prettier \"**/*.{ts,tsx,js,jsx,json,md}\" --check",
     "format:staged": "pretty-quick --staged",
@@ -120,9 +124,10 @@
     }
   },
   "prettier": "@spotify/prettier-config",
+  "engines": {
+    "node": ">=20.0.0 || >=22.0.0"
+  },
   "resolutions": {
-    "@types/react": "^17.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "eslint": "8.57.0"
   }
 }

src/components/APILinter/APILinter.test.tsx

@@ -0,0 +1,108 @@
+import { APILinter } from '.';
+import { ThemeProvider } from '@material-ui/core';
+import { themes } from '@backstage/theme';
+import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
+import userEvent from '@testing-library/user-event';
+import { fireEvent } from '@testing-library/react';
+import { zallyApiRef } from '../../api';
+import { mockZallyApi, mockZallyApiEmpty } from './__tests__/mocks';
+import schema from './__tests__/schemaMock.json';
+import '@testing-library/jest-dom';
+
+const stringSchema = encodeURIComponent(JSON.stringify(schema));
+
+function renderApp(withEmpty = false) {
+  const mockApi = withEmpty ? mockZallyApiEmpty : mockZallyApi;
+  return renderInTestApp(
+    <TestApiProvider apis={[[zallyApiRef, mockApi]]}>
+      <ThemeProvider theme={themes.light}>
+        <APILinter />
+      </ThemeProvider>
+    </TestApiProvider>,
+  );
+}
+
+describe('APILinter', () => {
+  let originalSessionStorage: Storage;
+
+  beforeAll(() => {
+    originalSessionStorage = window.sessionStorage;
+    Object.defineProperty(window, 'sessionStorage', {
+      writable: true,
+      value: {
+        getItem: jest.fn().mockName('getItem'),
+        setItem: jest.fn().mockName('setItem'),
+      },
+    });
+  });
+
+  beforeEach(() => {
+    (sessionStorage.getItem as jest.Mock).mockClear();
+    (sessionStorage.setItem as jest.Mock).mockClear();
+  });
+
+  afterAll(() => {
+    Object.defineProperty(window, 'sessionStorage', {
+      writable: true,
+      value: originalSessionStorage,
+    });
+  });
+
+  it('should render rules', async () => {
+    const { getByText, findAllByTestId } = await renderApp();
+    fireEvent.click(getByText(/view the rules/i));
+    const ruleCards = await findAllByTestId('rule');
+    expect(ruleCards.length).toBeGreaterThan(0);
+  });
+
+  it('should render URL dialog and display violation', async () => {
+    const { getByText, getByTestId, findByTestId, findAllByTestId } =
+      await renderApp();
+
+    fireEvent.click(getByText(/import url/i));
+    const urlInput = getByText(/Enter the url to import from/i);
+    await userEvent.type(urlInput, 'https://www.rawapi.com.br/api.json');
+    fireEvent.click(getByTestId(/url-validate/i));
+    const violations = await findAllByTestId(/violation/i);
+    expect(violations.length).toBe(1);
+    expect(await findByTestId('must')).toBeInTheDocument();
+  });
+
+  it('should render Schema and display violations', async () => {
+    const { getByText, getByTestId, findAllByTestId } = await renderApp();
+    const schemaInput = getByText(/Paste a swagger schema here/i);
+    expect(schemaInput).toBeInTheDocument();
+    await userEvent.type(schemaInput, stringSchema);
+    fireEvent.click(getByTestId(/schema-validate/i));
+    const violations = await findAllByTestId(/violation/i);
+    expect(violations.length).toBe(1);
+  });
+});
+
+describe('APILinter - No violations / Error', () => {
+  it('should display perfect badge when no violations are found', async () => {
+    const { getByTestId, getByText, findByTestId } = await renderApp(true);
+    fireEvent.click(getByText(/import url/i));
+    const urlInput = getByText(/Enter the url to import from/i);
+    await userEvent.type(urlInput, 'https://www.perfectapi.com.br/api.json');
+    fireEvent.click(getByTestId(/url-validate/i));
+    expect(await findByTestId(/perfect/i)).toBeInTheDocument();
+  });
+
+  it('should not submit when user types invalid url', async () => {
+    const { getByText, getByTestId } = await renderApp(true);
+    fireEvent.click(getByText(/import url/i));
+    const urlInput = getByText(/Enter the url to import from/i);
+    await userEvent.type(urlInput, 'invalid-url');
+    fireEvent.click(getByTestId(/url-validate/i));
+    expect(getByText(/enter the URL to import from/i)).toBeInTheDocument();
+  });
+
+  it('should render Schema and display correct badge when no violations are found', async () => {
+    const { getByText, findByTestId } = await renderApp(true);
+    const schemaInput = getByText(/Paste a swagger schema here/i);
+    await userEvent.type(schemaInput, stringSchema);
+    fireEvent.click(getByText(/Validate/i));
+    expect(await findByTestId('perfect')).toBeInTheDocument();
+  });
+});

src/components/APILinter/APILinter.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Schemas } from '../Schemas';
 import { useApi } from '@backstage/core-plugin-api';
 import { zallyApiRef } from '../../api';