ci: Add a CI workflow for pull requests

.github/workflows/ci.yaml

@@ -0,0 +1,33 @@
+name: CI
+
+on:
+  pull_request:
+
+jobs:
+  build-and-test:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        shell: nix develop --command bash {0}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - uses: DeterminateSystems/nix-installer-action@main
+      - uses: DeterminateSystems/magic-nix-cache-action@main
+      - uses: DeterminateSystems/flake-checker-action@main
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Lint
+        run: just lint
+
+      - name: Test
+        run: just test
+
+      - name: Type Check
+        run: yarn tsc
+
+      - name: Build
+        run: yarn build

.github/workflows/release.yaml

@@ -25,6 +25,7 @@ jobs:
       changes: ${{ steps.check_changes.outputs.changes }}
   release:
     runs-on: ubuntu-latest
+    needs: [ check-changes ]
     if: needs.check-changes.outputs.changes == 'detected'
     defaults:
       run:

backstage.json

@@ -0,0 +1,3 @@
+{
+  "version": "1.45.3"
+}

dev/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { createDevApp } from '@backstage/dev-utils';
 import { sysdigPlugin, SysdigPage } from '../src/plugin';
 import { EntityProvider } from '@backstage/plugin-catalog-react';
@@ -16,12 +15,12 @@ const mockEntity = {
       // 'sysdigcloud.com/kubernetes-cluster-name': 'sock-shop-cluster',
       // 'sysdigcloud.com/kubernetes-namespace-name': 'sock-shop',
       // 'sysdigcloud.com/kubernetes-workload-name': 'sock-shop-carts',
-      // 'sysdigcloud.com/kubernetes-workload-type': 'deployment',
-      // 'sysdigcloud.com/registry-vendor': 'harbor',
+      'sysdigcloud.com/kubernetes-workload-type': 'deployment',
+      'sysdigcloud.com/registry-vendor': 'dockerv2',
       // 'sysdigcloud.com/registry-name': 'registry-harbor-registry.registry.svc.cluster.local:5443',
-      // 'sysdigcloud.com/image-freetext': 'ghcr.io/sysdiglabs',
-      // 'sysdigcloud.com/resource-name': 'sock-shop-carts',
-      // 'sysdigcloud.com/resource-type': 'Deployment',
+      'sysdigcloud.com/image-freetext': 'ghcr.io',
+      'sysdigcloud.com/resource-name': 'sock-shop-carts',
+      'sysdigcloud.com/resource-type': 'Deployment',
     },
   },
   spec: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sysdig/backstage-plugin-sysdig",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "main": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "license": "Apache-2.0",
@@ -28,9 +28,9 @@
     "@testing-library/react": "^16.0.0"
   },
   "dependencies": {
-    "@backstage/core-components": "^0.14.0",
-    "@backstage/core-plugin-api": "^1.9.0",
-    "@backstage/plugin-catalog-react": "^1.13.0",
+    "@backstage/core-components": "^0.18.3",
+    "@backstage/core-plugin-api": "^1.12.0",
+    "@backstage/plugin-catalog-react": "^1.21.3",
     "@mui/icons-material": "^5.16.0",
     "@mui/material": "^5.16.0",
     "react-use": "^17.2.4"
@@ -40,11 +40,11 @@
     "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.25.2",
+    "@backstage/cli": "^0.34.5",
     "@backstage/config": "^1.3.6",
-    "@backstage/dev-utils": "^1.0.27",
+    "@backstage/dev-utils": "^1.1.17",
     "@backstage/eslint-plugin": "^0.2.0",
-    "@backstage/test-utils": "^1.5.0",
+    "@backstage/test-utils": "^1.7.13",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@spotify/eslint-config-base": "^15.0.0",

src/components/SysdigComponent/SysdigComponent.test.tsx

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
 import { SysdigComponent } from './SysdigComponent';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';

src/components/SysdigComponent/SysdigComponent.tsx

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
 import Grid from '@mui/material/Grid';
 import {
   Header,

src/components/SysdigPostureFetchComponent/SysdigPostureFetchComponent.test.tsx

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
 import { screen } from '@testing-library/react';
 import { SysdigPostureFetchComponent } from './SysdigPostureFetchComponent';
 import { EntityProvider } from '@backstage/plugin-catalog-react';

src/components/SysdigPostureFetchComponent/SysdigPostureFetchComponent.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
+import { useMemo } from 'react';
 import { Table, TableColumn, Progress } from '@backstage/core-components';
 import useAsync from 'react-use/lib/useAsync';
 import Alert from '@mui/material/Alert';
@@ -114,7 +114,7 @@ type PostureScan = {
 
 type DenseTableProps = {
   postureScans: PostureScan[];
-  title: React.JSX.Element;
+  title: JSX.Element;
 };
 
 // Example image response from Sysdig scanning API
@@ -216,7 +216,7 @@ export const SysdigPostureFetchComponent = () => {
 
   const annotations = entity.metadata.annotations;
 
-  const { filter, backlink, hasSysdigAnnotations } = React.useMemo(() => {
+  const { filter, backlink, hasSysdigAnnotations } = useMemo(() => {
     let currentFilter = '?filter=';
     let currentBacklink = getBacklink(endpoint, backlink_config, "inventory");
     let name: string | undefined;

src/components/SysdigVMPipelineFetchComponent/SysdigVMPipelineFetchComponent.test.tsx

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
 import { screen } from '@testing-library/react';
 import { SysdigVMPipelineFetchComponent } from './SysdigVMPipelineFetchComponent';
 import { EntityProvider } from '@backstage/plugin-catalog-react';

src/components/SysdigVMPipelineFetchComponent/SysdigVMPipelineFetchComponent.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
+import { useMemo } from 'react';
 import { Table, TableColumn, Progress } from '@backstage/core-components';
 import useAsync from 'react-use/lib/useAsync';
 import Alert from '@mui/material/Alert';
@@ -49,7 +49,7 @@ type PipelineScan = {
 
 type DenseTableProps = {
   pipelineScans: PipelineScan[];
-  title: React.JSX.Element;
+  title: JSX.Element;
 };
 
 // Example image response from Sysdig scanning API
@@ -117,7 +117,7 @@ export const SysdigVMPipelineFetchComponent = () => {
 
   const annotations = entity.metadata.annotations;
 
-  const { filter, backlink, hasSysdigAnnotations } = React.useMemo(() => {
+  const { filter, backlink, hasSysdigAnnotations } = useMemo(() => {
     let currentFilter = '?filter=';
     let currentBacklink = getBacklink(endpoint, backlink_config, "vm-pipeline");
     let name: string | undefined;

src/components/SysdigVMRegistryFetchComponent/SysdigVMRegistryFetchComponent.test.tsx

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
 import { screen } from '@testing-library/react';
 import { SysdigVMRegistryFetchComponent } from './SysdigVMRegistryFetchComponent';
 import { EntityProvider } from '@backstage/plugin-catalog-react';

src/components/SysdigVMRegistryFetchComponent/SysdigVMRegistryFetchComponent.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
+import { useMemo } from 'react';
 import { Table, TableColumn, Progress } from '@backstage/core-components';
 import useAsync from 'react-use/lib/useAsync';
 import Alert from '@mui/material/Alert';
@@ -48,7 +48,7 @@ type RegistryScan =   {
 
 type DenseTableProps = {
   registryScans: RegistryScan[];
-  title: React.JSX.Element;
+  title: JSX.Element;
 };
 
 // Example image response from Sysdig scanning API
@@ -106,7 +106,7 @@ export const SysdigVMRegistryFetchComponent = () => {
 
   const annotations = entity.metadata.annotations;
 
-  const { filter, backlink, hasSysdigAnnotations } = React.useMemo(() => {
+  const { filter, backlink, hasSysdigAnnotations } = useMemo(() => {
     let currentFilter = '?filter=';
     let currentBacklink = getBacklink(endpoint, backlink_config, "vm-registry");
     let name: string | undefined;

src/components/SysdigVMRuntimeFetchComponent/SysdigVMRuntimeFetchComponent.test.tsx

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
 import { screen } from '@testing-library/react';
 import { SysdigVMRuntimeFetchComponent } from './SysdigVMRuntimeFetchComponent';
 import { EntityProvider } from '@backstage/plugin-catalog-react';

src/components/SysdigVMRuntimeFetchComponent/SysdigVMRuntimeFetchComponent.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
+import { useMemo } from 'react';
 import { Table, TableColumn, Progress } from '@backstage/core-components';
 import useAsync from 'react-use/lib/useAsync';
 import Alert from '@mui/material/Alert';
@@ -71,7 +71,7 @@ type RuntimeScan =   {
 
 type DenseTableProps = {
   runtimeScans: RuntimeScan[];
-  title: React.JSX.Element;
+  title: JSX.Element;
 };
 
 // Example image response from Sysdig scanning API
@@ -157,7 +157,7 @@ export const SysdigVMRuntimeFetchComponent = () => {
 
   const annotations = entity.metadata.annotations;
 
-  const { filter, backlink, hasSysdigAnnotations } = React.useMemo(() => {
+  const { filter, backlink, hasSysdigAnnotations } = useMemo(() => {
     let currentFilter = '?filter=';
     let currentBacklink = getBacklink(endpoint, backlink_config, "vm-runtime");
     let names: string | undefined;

src/lib/ui.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Chip from '@mui/material/Chip';
 import Tooltip from '@mui/material/Tooltip';
 import IconButton from '@mui/material/IconButton';
@@ -91,15 +90,15 @@ function truncate(str: string, n: number){
 };
 
 function getFailed(failed: any) {
-  const result: React.JSX.Element[] = [];
+  const result: JSX.Element[] = [];
   for (const policy of failed.filter((f: { [x: string]: any; }) => !f.pass)) {
     result.push(<Chip size="small" label={truncate(policy.name,25)} style={{backgroundColor:'red'}} key={policy.name} />);
   }
   return result;
 }
 
 function getPassed(passed: any) {
-  const result: React.JSX.Element[] = [];
+  const result: JSX.Element[] = [];
   for (const policy of passed.filter((f: { [x: string]: any; }) => f.pass)) {
     result.push(<Chip size="small" label={truncate(policy.name,25)} style={{backgroundColor:'green'}} key={policy.name} />);
   }