snyk-tech-services/backstage-plugin-snyk

backstage-plugin-snyk's Issues

The automated release is failing 🚨

🚨 The automated release from the main branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

[🙏] Migrate to Material UI 5

Backstage is moving towards full Material UI 5 and I think it would be a good idea for this plugin to also migrate to get rid of Material UI 4 dependencies altogether.

[🙏] Simplify `SNYK_TOKEN`

Describe the user need
It is a bit confusing having to include the token prefix inside the SNYK_TOKEN environment variable.

Describe expected behaviour

You could include this prefix in the proxy configuration, allowing SYNK_TOKEN to contain only the token.

proxy:
  '/snyk':
    target: https://snyk.io/api/v1
    headers:
      User-Agent: tech-services/backstage-plugin/1.0
-     Authorization:
-       $env: SNYK_TOKEN
+     Authorization: token ${SNYK_TOKEN}

[🙏] need feature to filter with project id as optional instead of pulling all projects in target

Describe the user need

i need a feature of project-id as optional annotation, If we provide it it has to pull these projects only instead of pulling all projects pulling from target
in some of my bitbucket repos using as shared repos, There is multiple pom files are present in single repo and each application owner may changes, so we can't provide the all project snyk reports to each developer which they won't own
i am requesting to add this feature to avoid un necessary confusion to developers

Describe expected behaviour

i need a optional project ids filter to pull those projects only from the target instead of pulling all projects

[🙏] Link issues back to Snyk Dashboard

Describe the user need
We would like the Snyk plugin to link back to the Snyk Dashboard in a more obvious way. Currently, the list of vulnerabilities is just static text, It is difficult to take actions without more information. The only link back to Snyk is at the very bottom with "More Details ->". With a very long list of vulnerabilities, this is very well hidden, and is not obviously a link back to Snyk.

Describe expected behaviour

Each vulnerability could be linked in some way to the actual issue, which would bring users to the Snyk Dashboard:

Additional context
Current behavior, a list of vulnerabilities without sufficient context:

Follow the Backstage releases

Hi,

the plugin has not been updated since Oct 6th. This is a problem with Backstage being released weekly, the dependencies are conflicting.

Do you have any plans to release weekly, and keep compatibility with Backstage?

[🐛] Error "Warning: Unable to find snyk project details"

Hi,
I recently tried to use the plugin. I followed the guideline in https://github.com/snyk-tech-services/backstage-plugin-snyk, but nothing shows up in the entity page. While trying to debug, I tried to remove the <EntitySwitch.Case if={isSnykAvailable}> and the Snyk section shows up but with the error "Warning: Unable to find snyk project details" (so it seems like the isSnykAvailable variable is false) . I tried different annotations (snyk.io/org-name together with snyk.io/projects-ids, snyk.io/target-id) but none worked. The integrated SCM is Bitbucket Server.

I opened a ticket request to Snyk support (ticket ID 54813) and had the troubleshooting session but we did not find out the cause of the issue. I was asked to open this ticket here.

The content of the entities.yaml looks like this:

# https://backstage.io/docs/features/software-catalog/descriptor-format#kind-component
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: example-website
  annotations:
    snyk.io/org-name: OrgTemplate
    snyk.io/target-id: c8b7c792-2c6d-4b1d-8b80-8b125fc9b25d
spec:
  type: website
  lifecycle: experimental
  owner: quang-test
  system: examples
  providesApis: [example-grpc-api]

The error looks like below:

The SNYK_TOKEN variable is set and I verified that token is valid.
Do you know what could I have configured wrong?

Thanks,
Quang

The automated release is failing 🚨

🚨 The automated release from the main branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Cannot push to the Git repository.

semantic-release cannot push the version tag to the branch main on the remote Git repository with URL https://[secure]@github.com/snyk-tech-services/backstage-plugin-snyk.git.

This can be caused by:

• a misconfiguration of the repositoryUrl option
• the repository being unavailable
• or missing push permission for the user configured via the Git credentials on your CI environment

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

[🐛] 404 Failed fetching Targets list snyk data with targets annotation

• node -v: 18.19
• npm -v:
• OS: Linux
• Command run: n/a

Expected behaviour

Given the annotations below, we should see Snyk vulnerability/security data for our service in Backstage

apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
name: MyRepoName
annotations:
snyk.io/org-id: MyOrgUUID
snyk.io/targets: MyOrgName/MyRepoName

Actual behaviour

Upon registering the catalog-info.yaml in Backstage, and clicking on the Security tab, backstage-plugin-snyk reports

404 Failed fetching Targets list snyk data

Digging further in to our logs, I see calls to...

https://api.snyk.io/rest/orgs/MyOrgUUID/targets?displayName=MyOrgName%2FMyRepoName&version=2023-11-06

But the API version 2023-11-06 does not have a targets endpoint

The api endpoint version for the function getTargetID would need to be ${version}~beta to get access to the targets endpoint

backstage-plugin-snyk/src/api/index.ts

Line 420 in cb713ae

private async getTargetId(

Steps to reproduce

• Add backstage-plugin-snyk to your backstage application (version 2.2.1 and 2.2.2 tested)
• Create a Snyk Target in an Organization
• Create service with the above mentioned annotations in the catalog-info.yaml

[🐛] Error occurred while proxying request

• node -v: v14.18.1
• npm -v: 6.14.15
• OS: Linux
• Command run: (e.g. snyk-api-import ..., ...) 🤷‍♂️

Expected behaviour

The proxying of requests work in the backend, and Snyk card is shown to the user.

Actual behaviour

The proxying of requests doesn't work in the backend.

My config is as follows:

proxy:
  '/snyk':
    target: https://snyk.io/api/v1
    headers:
      User-Agent: tech-services/backstage-plugin/1.0
      Authorization:
        $include: ${SECRET_TOKENS}#SNYK_TOKEN

I also tried the workaround listed here: #11 but still the same.

I tried enabling debug logs (LOG_LEVEL=debug) but I don't see anything more than that. I have no idea what's going on between the backend and Snyk's API.

I can curl the Snyk API (https://snyk.io/api/v1/org/<my-org>/projects) fine with my token.

Steps to reproduce

Please share minimal steps needed to reproduce your issue. Ideally
a paired down manifest / project to showcase the problem that can also
be used for testing.

Debug log

2021-11-15T06:37:13.168Z proxy error [HPM] Error occurred while proxying request <backstage-url>/api/proxy/snyk/org/<myorg>/projects to https://snyk.io/api/v1 [ECONNRESET] (https://nodejs.org/api/errors.html#errors_common_system_errors) type=plugin

Screenshots

If applicable, add screenshots to help explain your problem.

[🐛] Discovering projects from `github.com/project-slug` limits results to only 10 projects

• node -v: v16.14.0
• npm -v: 8.3.1
• OS: OSX
• Command run: Backstage Plugin

Expected behaviour

GitHub Repos with >10 Projects should display all Projects when discovering by github.com/project-slug annotation

Actual behaviour

Default page limit of 10 is only being returned, so not all projects are shown. Additionally, all tabs show the source of the project (e.g. yarn) instead of the project name, so the tabbed view is really hard to use.

Steps to reproduce

1. Have a GitHub repo with >10 combined Dockerfiles, package.json, etc. (e.g, a Backstage repo with internal plugins)
2. Configure backstage-plugin-snyk and configure an Entity as defined in docs

Debug log

N/A

Screenshots

N/A

[🐛] Plugin does not use composability API

• node -v: v14.15.4
• npm -v: 6.14.10
• OS: macOS
• Command run: N/A

Expected behaviour

Adding the snyk plugin to a backstage installation with the composability API.

When registering I would expect something along the lines of this.

<EntityLayout.Route path="/snyk" title="Snyk">
  <EntitySnykContent />
</EntityLayout.Route>

Actual behaviour

Integration does not work as the plugin does not use the composability API and thus an entity is not available to inject into the widgets.

Steps to reproduce

Follow the instructions in the README of this repo which uses the old API.
Most specifically when registering widgets.

// packages/app/src/components/catalog/EntityPage.tsx
const OverviewContent = ({ entity }: { entity: Entity }) => (
  <Grid container spacing={3} alignItems="stretch">
    ...
    <Grid item>        
      <SnykOverviewComponent entity={entity} />
    </Grid>
    ...
  </Grid>
);

Need help with Snyk integration on Backstage

Hey guys,
I have followed the steps mentioned here to integrate Snyk on Backstage.

• When I try the Snyk API with the Auth token, I am getting 200 OK response with relevant data. But when I go to Backstage and view the Snyk integration it throws an error "Error - Failed finding Target snyk data for repo <repo_path>"
• When I try to cURL with URL https://<backstage_url>/api/proxy/snyk/rest/orgs/<org_id>/targets?version=2023-06-19~beta I am getting the 200 OK response with relevant data
• But when I go to backstage and open Synk integration, with URL: https://<backstage_url>/api/proxy/snyk/rest/orgs/<org_id>/targets?displayName=<repo_path>&version=2023-06-19~beta but the response returned is

{"jsonapi":{"version":"1.0"},"data":[],"links":{}}

and the UI throws the error

Error - Failed finding Target snyk data for repo <repo_path>

• When I add the displayName to the API URL, I get empty data. But when I remove it I am getting the data. How do I make sure that the Backstage is not calling the URL with displayName?

Can anyone help me on this please?

Thanks.

[🙏] Use Repository Instead of Project ID

Describe the user need
We would like users to be able to use this plugin without manually gathering and maintaining a list of Snyk project-id. The Snyk Dashboard has a list of all projects underneath a repository, and in some cases (a monorepo for instance), this could be dozens of project-id which change frequently.

Describe expected behaviour
Ability for the Snyk plugin to list all the projects given just the org name and repo slug.

[🐛] When using `target-id` and `project-id` the vulnerabilities tab still shows the org level vulnerabilities

• node -v: v18.19.0
• npm -v: 10.2.3
• OS: (e.g. OSX, Linux, Windows, ...)
• Command run: (e.g. snyk-api-import ..., ...)

Expected behaviour

Please share expected behaviour.

The vulnerability tab in backstage should've shown just the project related vulnerability since project-id is used in the catalog-info.yaml not the org level vulnerabilities.

Actual behaviour

Please share problematic behaviour you are seeing.

it is showing the org level vulnerability even if i defined

    snyk.io/target-id: test/backstage
    snyk.io/project-ids: {guid1}, {guid2}
    

[🙏] `isSnykAvailable` function, and display information on how to configure instead of that gif

Describe the user need
I would like a isSnykAvailable so i can do:

    <EntitySwitch>
      <EntitySwitch.Case if={isSnykAvailable}>
        <Grid item md={6} xs={12}>
          <SnykOverview />
        </Grid>
      </EntitySwitch.Case>
    </EntitySwitch>

Describe expected behaviour

When Snyk is not available, the big gif of John Travolta is showing. This is not a very good user experience.

Additional context

When Snyk is not available, it would also be nicer to show how to configure it, instead of that horrible gif.

[🐛] Error: No Snyk org/project-ids listed

• node -v: v14.17.5
• npm -v: 6.14.14
• OS: (e.g. OSX, Linux, Windows, ...) Debian GNU/Linux 10 (buster)

Expected behaviour

Installing plugin on a backstage application should work.

Actual behaviour

In the "Security" (Snyk) tab, I'm getting below error:

No Snyk org/project-ids listed

This is happening probably due to this code:

if (!entity || !entity?.metadata.name) {
  return <>No Snyk org/project-ids listed</>;
}

But our projects have metadata.name, metadata.annotations.snyk.io/org-name and metadata.annotations.snyk.io/project-ids defined:

apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: foo
  description: foo
  annotations:
    snyk.io/org-name: foo
    snyk.io/project-ids: foo

Steps to reproduce

• Create a backstage application.
• Run yarn backstage-cli versions:bump to ensure packages are updated.
• Pin tech-radar to 0.4.4 due to this issue.

[🙏] Summary Tile for Overview Page

Describe the user need
I want to help my engineers understand when they need to give extra attention to their service's Snyk projects. Being able to provide a single tile summary would enable us to provide an alert and hook for more details right from the service overview page.

Describe expected behaviour

A small green/yellow/red indicator with issue counts would be sufficient.

Additional context

API version change leads to Bad Request

With the new default version that is used, this API call will lead to a 400 when using project slugs as they contain slashes.

Either the documentation in the README should be updated or a default URL-encoding should be added when generating the URL.

[🙏] Add a collection

Describe the user need
I want to be able to visualize a collections status via the plugin

Describe expected behaviour

If i add a collection to the config ex: snyk.io/collection: collectionid
It would be possible to see an overview of a collection instead of adding multiple projects one by one.

[🙏] Pending tasks overview

Describe the user need
I want the snyk plugin to show the pending tasks as shown on the snyk dashboard page (the list with open pull requests etd).
This would fit in using backstage as my single pane of glass for my developers and make the burden to take a look at the list to resolve them even lower.

Describe expected behaviour
On the snyk overview page a component with the open tasks

[🙏] Doc : additional info on how to implement multiple Snyk orgs

I couldn't find a note on how to implement multiple Snyk orgs using the new feature
#167

My use case is :

• Snyk Org A has one API key
• Snyk Org B has it's own API key

In Backstage I can only see in the docs to pass one API key (AFIAK)

proxy:
  endpoints:
    ...
    /snyk:
      # Host of the API to use on the calls.
      # If you use EU or AU Snyk account, change this to https://api.eu.snyk.io/ or https://api.au.snyk.io/
      target: https://api.snyk.io/
      headers:
        User-Agent: tech-services/backstage-plugin/1.0
        Authorization: token ${SNYK_TOKEN}
    ...

Describe expected behaviour
A note in the docs on how to handle this scenario with multiple API keys.
Or is there a more simple way to do this?

Doesn't work /snyk page [🐛]

• node -v: v16.16.0
• npm -v: 8.11.0
• OS: OSX

Expected behaviour

/snyk page should be shown

Actual behaviour

URL changes to https://xxx/snyk
no changes on the screen, no errors in the console

Steps to reproduce

Install the plugin as described
Click on "Across xx projects ->" link

Screenshots

If applicable, add screenshots to help explain your problem.

[🐛] Where are the screenshots in the README gone?

Screenshots

[🙏] Switch to the recently implemented multiline Missing Annotations state component

Make use of backstage/backstage#14136

[🐛]

Expected behaviour

the annotation snyk.io/target-id implies that you need the GUID style target id, but it is actually the target name

Actual behaviour

either the annotation needs to be renamed to target-name or it should accept the target id

[🐛] LinkInfo from Table in EntityPage it's hardcoded

Hi!

We are adopting snyk with a self-hosted instance (also using broker with azure devops self-hosted)

The plugin works perfectly but in the Entity Component Page (Sorry if its wrong)
the linkInfo that redirects you to the selected project in the snyk UI its hardcoded with the cloud hosted version (https://app.snyk.io/)

Will be great to have the host comming from the app-config.yml as we already have it pointing to the self-hosted instance, maybe using the configApi (or discoveryApi.getBaseUrl() in case you have backend plugin)

Thanks a lot for the good work 😊

https://github.com/snyk-tech-services/backstage-plugin-snyk/blame/81422bc4890e6fc9ea6fffb7302f6f7010d786de/src/components/SnykEntityComponent/snykTab.tsx#L83

[🙏] Support for Service to Service Auth

Describe the user need
We are trying to integrate Snyk Backstage Plugin, but since we have enabled Service to Service Auth for all services and plugins, we are not able to use this plugin.

Describe expected behaviour
Snyk Backstage Plugin should work whether S2S Auth is enabled or disabled.

Additional Context
Backend calls happening at proxy endpoint failing due to missing Auth token (returns 401 Unauthorised Error).

Possible Solution
Add bearer token to request headers in API calls from frontend.

Open to making a PR if needed.

[🐛] 404 response from Snyk API (solution)

Expected behaviour

Plugin works.

Actual behaviour

Plugin is recieving 404 responses from snyk

Steps to reproduce

Follow guide

Solution

My solution to this problem was to change the proxy to something like:

'/snyk':
    target: https://snyk.io/api/v1
    headers:
      User-Agent: tech-services/backstage-plugin/1.0
      Authorization:
        $env: SNYK_TOKEN
    pathRewrite:
      '^/proxy/snyk/': '/'

Maybe add this to the installation guide, that if you get 404 from the API you can try with some path rewrite :)

[🐛] Snyk count does not match the one from Snyk app.snyk.io (official website)

• node -v:
• npm -v:
• OS: (e.g. OSX, Linux, Windows, ...)
• Command run: (e.g. snyk-api-import ..., ...)

#163

Expected behaviour

The count of vulnerabilities of critical/high/medium/low from the Backstage Plugin and the ones from the app.snyk.io (official website) must match.

Actual behaviour

They do not match, I get 7 critical vulnerabilities for backstage itself for packages/backend/package.json with the plugin (more) than in the website where there are 0 critical vulnerabilities reported. Same happens with other project-ids where the plugin shows more than the official website.

I have noticed the plugin code does not check for the status = resolved in the issue data returned by the API, which seems to be what makes the difference (?). I am not sure if this status field refers to the CVE vulnerability being resolved or your actual issue being resolved, but to me it seems to be the later, so the counts would match like in the official website.

I might be wrong but it just seems like a bug to me, because I cannot reproduce having any vulnerability locally nor on the official website and the plugin keeps saying so

Steps to reproduce

Just add any project-id and the count mismatches, in the screenshots section I will show the code I was referring too and the behaviour I see

Screenshots

Vulnerability mismatch

Code not checking for the status field (resolved vs open)

API returning the issue status + proof that it is fixed

• It is reporting this vulnerability from backstage < 1.15, when my app is on 1.19 (latest)

* API returns the issue with `resolved` status, and the official website is not showing the vulnerability but the package does

---

PS:

I just noticed that the plugin in the security tab shows which ones are open/resolved.
Maybe this was intended but to me it makes no sense that the overview keeps showing vulnerabilities the developers have already resolved (?).

Maybe we can filter them out with an option if we don't want to make a breaking change to the current adopters (?)
Thanks

[🐛] snyk.io/target-id should take precedence over github.com/project-slug to list projects

snyk.io/target-id is more specific than github.com/project-slug (you can define multiple targets, not just 1 repo), but the used project list is loaded by shared github.com/project-slug .
It should apply for all components (Overview, SnykEntityComponent).

By default, Snyk CLI generates project names with "org/reponame.git" (with .git extension) which clashes with github.com/project-slug definition and some plugins cannot use it in this format (with the .git extension). Therefore we would like to use the snyk.io/target-id as an alternative.
It should be easy to fix SnykOverviewComponent.tsx, just to switch usage of the annotation values.
It's good idea to use project-slug, but IMHO the Snyk CLI should not include .git prefix into the name by default or the search by name should support it (same as Github, it takes both variants in URL).

Error: ignored vulnerabilities are count in overview component

https://github.com/snyk-tech-services/backstage-plugin-snyk/blob/9159a8faebb56c650c1489e3d5831bd750810e5c/src/components/SnykEntityComponent/SnykOverviewComponent.tsx#L67C1-L104C51

Hello! I just updated to the latest version of the plugin and everything looks great! Thanks for the hard work.

I'm currently analazyng a little bit about what it's shown in the UI and when I have a component that have ignored vulnerabilities, the overview component count them anyways.

Is this the desired behaviour? From our side seems confusing, evendo in the security tab section everything it's green

Type conflicts with Backstage v1.0 [🐛]

• node -v: 16.14.2
• npm -v: 8.5.0
• OS: Linux
• Command run: tsc
• Backstage version: 1.0
• Snyk package v1.2.3

Expected behaviour

No type conflicts when used with backstage v1.0

Actual behaviour

Error:

packages/app/src/components/catalog/EntityPage.tsx:139:26 - error TS2322: Type '(entity: Entity) => boolean' is not assignable to type '(entity: Entity, context: { apis: ApiHolder; }) => boolean | Promise<boolean>'.
  Types of parameters 'entity' and 'entity' are incompatible.
    Type 'import("/app/node_modules/@backstage/catalog-model/dist/index").Entity' is not assignable to type 'import("/app/node_modules/backstage-plugin-snyk/node_modules/@backstage/catalog-model/dist/index").Entity'.
      Types of property 'relations' are incompatible.
        Type 'import("/app/node_modules/@backstage/catalog-model/dist/index").EntityRelation[] | undefined' is not assignable to type 'import("/app/node_modules/backstage-plugin-snyk/node_modules/@backstage/catalog-model/dist/index").EntityRelation[] | undefined'.
          Type 'import("/app/node_modules/@backstage/catalog-model/dist/index").EntityRelation[]' is not assignable to type 'import("/app/node_modules/backstage-plugin-snyk/node_modules/@backstage/catalog-model/dist/index").EntityRelation[]'.
            Property 'target' is missing in type 'import("/app/node_modules/@backstage/catalog-model/dist/index").EntityRelation' but required in type 'import("/app/node_modules/backstage-plugin-snyk/node_modules/@backstage/catalog-model/dist/index").EntityRelation'.
139       <EntitySwitch.Case if={isSnykAvailable}>
                             ~~
  node_modules/backstage-plugin-snyk/node_modules/@backstage/catalog-model/dist/index.d.ts:629:5
    629     target: EntityName;
            ~~~~~~
    'target' is declared here.
  node_modules/@backstage/plugin-catalog/dist/index.d.ts:213:5
    213     if?: (entity: Entity, context: {
            ~~
    The expected type comes from property 'if' which is declared here on type 'IntrinsicAttributes & EntitySwitchCaseProps'
Found 1 error.

[🐛] Errors running with latest backstage

I'm getting errors trying to start backstage with the snyk plugin included.
I believe this is due in part to the backstage cli upgrade to webpack 5 and also because certain dependencies aren't listed.

Expected behaviour

I can use the snyk plugin with the latest backstage.

Actual behaviour

[0] ERROR in ../../node_modules/@snyk/dep-graph/dist/legacy/index.js 4:15-32
[0] Module not found: Error: Can't resolve 'crypto' in '/Users/iainbillett/code/test-apps/ch3329-test-plugin-with-new-app/node_modules/@snyk/dep-graph/dist/legacy'
[0] 
[0] BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
[0] This is no longer the case. Verify if you need this module and configure a polyfill for it.
[0] 
[0] If you want to include a polyfill, you need to:
[0]     - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
[0]     - install 'crypto-browserify'
[0] If you don't want to include a polyfill, you can use an empty module like this:
[0]     resolve.fallback: { "crypto": false }
[0] 
[0] ERROR in ../../node_modules/backstage-plugin-snyk/dist/api/index.js 16:0-47
[0] Module not found: Error: Can't resolve '@backstage/core' in '/Users/iainbillett/code/test-apps/ch3329-test-plugin-with-new-app/node_modules/backstage-plugin-snyk/dist/api'
[0] 
[0] ERROR in ../../node_modules/backstage-plugin-snyk/dist/components/SnykEntityComponent/SnykEntityComponent.js 2:0-111
[0] Module not found: Error: Can't resolve '@backstage/core' in '/Users/iainbillett/code/test-apps/ch3329-test-plugin-with-new-app/node_modules/backstage-plugin-snyk/dist/components/SnykEntityComponent'
[0] 
[0] ERROR in ../../node_modules/backstage-plugin-snyk/dist/components/SnykEntityComponent/SnykOverviewComponent.js 2:0-85
[0] Module not found: Error: Can't resolve '@backstage/core' in '/Users/iainbillett/code/test-apps/ch3329-test-plugin-with-new-app/node_modules/backstage-plugin-snyk/dist/components/SnykEntityComponent'
[0] 
[0] ERROR in ../../node_modules/backstage-plugin-snyk/dist/components/SnykEntityComponent/components/SnykDepGraphComponent.js 5:0-43
[0] Module not found: Error: Can't resolve '@backstage/core' in '/Users/iainbillett/code/test-apps/ch3329-test-plugin-with-new-app/node_modules/backstage-plugin-snyk/dist/components/SnykEntityComponent/components'
[0] 
[0] ERROR in ../../node_modules/backstage-plugin-snyk/dist/components/SnykEntityComponent/components/SnykIgnoredIssuesComponent.js 2:0-40
[0] Module not found: Error: Can't resolve '@backstage/core' in '/Users/iainbillett/code/test-apps/ch3329-test-plugin-with-new-app/node_modules/backstage-plugin-snyk/dist/components/SnykEntityComponent/components'
[0] 
[0] ERROR in ../../node_modules/backstage-plugin-snyk/dist/components/SnykEntityComponent/components/SnykIssuesComponent.js 2:0-40
[0] Module not found: Error: Can't resolve '@backstage/core' in '/Users/iainbillett/code/test-apps/ch3329-test-plugin-with-new-app/node_modules/backstage-plugin-snyk/dist/components/SnykEntityComponent/components'
[0] 
[0] ERROR in ../../node_modules/backstage-plugin-snyk/dist/components/SnykEntityComponent/components/SnykLicenseIssuesComponent.js 2:0-40
[0] Module not found: Error: Can't resolve '@backstage/core' in '/Users/iainbillett/code/test-apps/ch3329-test-plugin-with-new-app/node_modules/backstage-plugin-snyk/dist/components/SnykEntityComponent/components'
[0] 
[0] ERROR in ../../node_modules/backstage-plugin-snyk/dist/components/SnykEntityComponent/snykTab.js 2:0-109
[0] Module not found: Error: Can't resolve '@backstage/core' in '/Users/iainbillett/code/test-apps/ch3329-test-plugin-with-new-app/node_modules/backstage-plugin-snyk/dist/components/SnykEntityComponent'
[0] 
[0] ERROR in ../../node_modules/backstage-plugin-snyk/dist/plugin.js 16:0-134
[0] Module not found: Error: Can't resolve '@backstage/core' in '/Users/iainbillett/code/test-apps/ch3329-test-plugin-with-new-app/node_modules/backstage-plugin-snyk/dist'
[0] 
[0] ERROR in ../../node_modules/backstage-plugin-snyk/dist/routes.js 16:0-49
[0] Module not found: Error: Can't resolve '@backstage/core' in '/Users/iainbillett/code/test-apps/ch3329-test-plugin-with-new-app/node_modules/backstage-plugin-snyk/dist'

Steps to reproduce

• Create a backstage instance (or upgrade an existing one) e.g. npx @backstage/create-app
• Follow instructions to install the Snyk plugin
• run yarn dev

Possible implementation

• Specify the core package dependencies e.g. @backstage/core-components, @backstage/core-plugin-api (FYI: @backstage/core isn't specified as a dependency and is now deprecated so no other package is importing it in my project)
• Not sure what the best fix for the crypto library is. Webpack 4 used to pollyfill this by default but it no longer does. (This might require an upstream fix in backstage)

[🐛] Dependencies tab throws if dep-graph endpoint returns null

• node -v: v14.18.1
• npm -v: 6.14.15
• OS: (e.g. OSX, Linux, Windows, ...) OSX
• Command run: (e.g. snyk-api-import ..., ...) n/a

Expected behaviour

The Dependencies tab gracefully handles the case where dep-graph data is null.

Actual behaviour

Message
Cannot read properties of null (reading 'schemaVersion')

Stack Trace
TypeError: Cannot read properties of null (reading 'schemaVersion')

Steps to reproduce

I'm not exactly sure how to induce the dep-graph to return null this was reported by another user. Could use some input on this if there's something users can do to avoid this situation.

[🙏] use the `MissingAnnotationEmptyState` instead of the meme gif

Describe the user need

I would like the Snyk plugin to produce a similar behaviour to other plugins when the annotation is not configured on the entity. Backstage has a MissingAnnotationEmptyState that provides this kind of layout:

Describe expected behaviour

Show consistent behaviour across different Backstage plugins when annotation is missing.

[🐛] Dependency on @backstage/core not listed

• node -v: v14.16.0
• npm -v: 6.14.11
• OS: (e.g. OSX, Linux, Windows, ...) Alpine 3.13

Expected behaviour

Installing plugin on a backstage application that has migrated to the new @backstage/core-* packages works.

Actual behaviour

yarn fails as the @backstage/core dependency is not listed as a dependency on this module but is required, eg. in plugin.ts

$ yarn build
...
/src/node_modules/backstage-plugin-snyk/dist/plugin.js
Module not found: Can't resolve '@backstage/core' in '/src/node_modules/backstage-plugin-snyk/dist'

Steps to reproduce

Create a backstage application that does not depend directly on @backstage/core, ie. have no reference to this package in package.json.

Run yarn build.

Possible fix

By running the @backstage/codemods tool we might be able to update the imports accordingly.

npx @backstage/codemods apply core-imports src

[🐛] Invalid hook call. Hooks can only be called inside of the body of a function component

• node -v: v16.13.2
• npm -v: 8.3.2
• OS: macOS

Expected behavior

Expected Snyk components to render without errors.

Actual behavior

Following instructions on the README, I encounter hook errors any time I try rendering any of the Snyk components

Error
Error

Message
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

Stack Trace
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (webpack-internal:///../../node_modules/backstage-plugin-snyk/node_modules/react/cjs/react.development.js:1465:13)
    at useContext (webpack-internal:///../../node_modules/backstage-plugin-snyk/node_modules/react/cjs/react.development.js:1473:20)
    at useAnalyticsContext (webpack-internal:///../../node_modules/backstage-plugin-snyk/node_modules/@backstage/core-plugin-api/dist/index.esm.js:57:71)
    at AnalyticsContext (webpack-internal:///../../node_modules/backstage-plugin-snyk/node_modules/@backstage/core-plugin-api/dist/index.esm.js:75:24)
    at renderWithHooks (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:14985:18)
    at mountIndeterminateComponent (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:17811:13)
    at beginWork (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:19049:16)
    at HTMLUnknownElement.callCallback (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:3945:14)
    at Object.invokeGuardedCallbackDev (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:3994:16)
    at invokeGuardedCallback (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:4056:31)

Screenshots

Repro

Code like this:

import { Grid } from '@material-ui/core';
import {
  EntityHasSubcomponentsCard,
  EntityLinksCard,
} from '@backstage/plugin-catalog';
import React from 'react';
import { EntityAboutCard } from './EntityAboutCard';
import { EntityWarningContent } from './EntityWarningContent';
import { useEntity } from '@backstage/plugin-catalog-react';
import { EntityCatalogGraphCard } from '@backstage/plugin-catalog-graph';
import { EntitySonarQubeCard } from '@backstage/plugin-sonarqube';
import { SnykOverview } from 'backstage-plugin-snyk';

export const entityOverviewContent = (
  <Grid container spacing={3} alignItems="stretch">
    <EntityWarningContent />
    <Grid item md={6} xs={12}>
      <EntityAboutCard />
    </Grid>
    <Grid item md={6} xs={12}>
      <EntityCatalogGraphCard variant="gridItem" height={250} />
    </Grid>
    <Grid item xs={12}>
      <EntityHasSubcomponentsCard variant="gridItem" />
    </Grid>
    <Grid item md={6} xs={12}>
      <EntitySonarQubeCard variant="gridItem" />
    </Grid>
    <Grid item md={6} xs={12}>
      <SnykOverview />
    </Grid>
  </Grid>
);

Error: Entity context is not available[🐛]

• node -v:
• npm -v:
• OS: (e.g. OSX, Linux, Windows, ...)
• Command run: (e.g. snyk-api-import ..., ...)

Expected behaviour

To see the snyk plugin at http://localhost:3000/snyk

Actual behaviour

Error: Entity context is not available

Steps to reproduce

Hello, I have been following the steps from the code tab (https://github.com/snyk-tech-services/backstage-plugin-snyk) to set up the plugin but even when I follow all the steps, I encounter the issue (Error: Entity context is not available), please find the screenshot attached as well.

Error
Entity context is not available
Call Stack
 useEntity
  node_modules/backstage-plugin-snyk/node_modules/@backstage/plugin-catalog-react/dist/index.esm.js:624:11
 SnykEntityComponent
  node_modules/backstage-plugin-snyk/dist/components/SnykEntityComponent/SnykEntityComponent.js:57:98
 renderWithHooks
  node_modules/react-dom/cjs/react-dom.development.js:14985:18
 mountIndeterminateComponent
  node_modules/react-dom/cjs/react-dom.development.js:17811:13
 beginWork
  node_modules/react-dom/cjs/react-dom.development.js:19049:16
 HTMLUnknownElement.callCallback
  node_modules/react-dom/cjs/react-dom.development.js:3945:14
 Object.invokeGuardedCallbackDev
  node_modules/react-dom/cjs/react-dom.development.js:3994:16
 invokeGuardedCallback
  node_modules/react-dom/cjs/react-dom.development.js:4056:31
 beginWork$1
  node_modules/react-dom/cjs/react-dom.development.js:23959:7
 performUnitOfWork
  node_modules/react-dom/cjs/react-dom.development.js:22771:12

This is what it is displayed when I visit http://localhost:3000/snyk (the backstage is correctly configured locally). On my terminal there is no indicator about an error after running yarn dev.

Screenshots

[🐛] - Small typo improvement in documentation on install command

In documentation you have
# packages/app yarn add backstage-plugin-snyk

This triggers a message saying

error Running this command will add the dependency to the workspace root rather than the workspace itself, which might not be what you want - if you really meant it, make it explicit by running this command again with the -W flag (or --ignore-workspace-root-check).

Expected behaviour

Change documentation to

yarn add --cwd packages/app backstage-plugin-snyk

Keep up the good work!

[🐛] Plugin suddenly only returns 404

• node -v: v20.11.1
• npm -v: 10.2.4

Expected behaviour

Before updating to version 2.2.2 the plugin returned a list of findings for an entity. Ideally, that would still happen

Actual behaviour

An error is shown due to a 404 returned from the backend/API.

Screenshots

[🐛] Update Blog Post Instructions

The installation instructions at https://snyk.io/blog/backstage-integration-with-the-snyk-api/ no longer work - you instead need to follow the instructions in this repo's readme, but the blog post doesn't provide a way to get to this repo. The blog post is the first result if you google "Snyk Backstage"

Can you update the blog post to correct the installation instructions. (Or simply point to the installation instructions in readme so they don't deviate again in the future.

[🐛] 404 - Failed fetching Projects list snyk data

• node -v: 18.12.1
• yarn -v: 3.4.1
• OS: (e.g. OSX, Linux, Windows, ...) Windows
• Command run: (e.g. snyk-api-import ..., ...) 1.2.7

Expected behaviour

Please share expected behaviour.

<EntitySnykContent /> should render successfully without a 404 error.

Actual behaviour

Please share problematic behaviour you are seeing.

<EntitySnykContent /> renders with a 404 error.

Steps to reproduce

Please share minimal steps needed to reproduce your issue. Ideally
a paired down manifest / project to showcase the problem that can also
be used for testing.

I followed the README guide.

Steps I took to try to debug:

• Followed the recommended proxy 404 error workaround
• Changed the token to be incorrect which gave me a 401 auth error

Debug log

If applicable, please add DEBUG=*snyk* <command here> before your command and include the output here **ensuring to remove any sensitive/personal details or tokens.

N/A

Screenshots

If applicable, add screenshots to help explain your problem.

[🐛]clicking on any redirecting url to snyk is getting wrong snyk url

• node -v: 18
• npm -v: 9.5.1
• OS: MACOS
• Command run: (e.g. snyk-api-import ..., ...)

Expected behaviour

when we click on more data button at below of snyk reports, It has to redirect snyk ui regarding project location

Actual behaviour

its getting error like
"Unable to display this organization
The organization does not exist, or you do not have permission to access it.

If the problem persists, please contact support with reference ID "

not only more data button all redirection urls to snyk are getting same issue, they are getting with org id in redirection url instead of org name, that getting issue wrong org in snyk ui, it should get org name instead org id in redirection url

Steps to reproduce

1.select "your Component" in backstage
2. goto "Security"
3. select "any of your snyk project"
4. come down of the page
5. click on "more data"

Screenshots

[🙏] Use backstage.io/source-location instead of github.com/project-slug or snyk.io/target-id

Describe the user need
I've tested the 2.0.0 version of the plugin, and I think it's an improvement that we no longer have to specify project-ids manually in catalog-info.yaml.
But, I think it should be possible to make use of backstage.io/source-location rather than having to specify the project-slug. With the current behavior, we have to make sure that project-slug is updated if a repo is renamed.

Describe expected behaviour
Derive the "<owner>/<repo>" from backstage.io/source-location, when resolving the Snyk targets of a specific Github repo. If support for github.com/project-slug is kept for backwards compatibility, add a snyk.io feature flag to ignore it.

Additional context
Key motivation, lifecycle aspects of relationships between repos and Snyk projects: We currently handle renamed repos with snyk-api-import, to ensure that they are re-added to Snyk - and removing the orphan Snyk project referring to the old repo name. If the plugin honors project-slug, it will still refer to the orphan project (which will not contain the current vulns data). We'd like a unified relationship between Snyk and Github, in all contexts; Snyk UI, Github PRs, Backstage plugin and use snyk-api-import to update when needed.

[🐛]The plugin is depending on @backstage/plugin-catalog-react@^0.5.1 which depends on @backstage/core-app-api@^0.1.16 - This causes "yarn backstage-cli versions:pump" fail

• node -v: v14.18.3
• npm -v: yarn run v1.22.17
• OS: Linux
• Command run: (e.g. snyk-api-import ..., ...)

Expected behaviour

yarn backstage-cli versions:bump
should be successfully

Actual behaviour

yarn backstage-cli versions:bump
fail with error:

The following packages must be deduplicated by updating dependencies in package.json
@backstage/core-app-api @ ^0.1.16 should be changed to ^0.5.2

Steps to reproduce

Follow the link https://github.com/snyk-tech-services/backstage-plugin-snyk/blob/main/README.md to add snyk plugin

Run "yarn backstage-cli versions:bump" to update version

Debug log

If applicable, please add DEBUG=*snyk* <command here> before your command and include the output here **ensuring to remove any sensitive/personal details or tokens.

Screenshots

If applicable, add screenshots to help explain your problem.