fix: make project links valid and pull up to 100 projects

snyk-tech-services · Jul 25, 2023 · a3c2b8f · a3c2b8f
1 parent 8d0b244
commit a3c2b8f
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 8 deletions.
diff --git a/src/api/index.ts b/src/api/index.ts
@@ -21,6 +21,7 @@ import {
   DiscoveryApi,
 } from "@backstage/core-plugin-api";
 import { TargetData } from "../types/targetsTypes";
+import { OrgData } from "../types/orgsTypes";
 
 const DEFAULT_PROXY_PATH_BASE = "";
 
@@ -43,6 +44,7 @@ export interface SnykApi {
   ProjectsList(orgName: string, repoName:string): Promise<any>;
   GetDependencyGraph(orgName: string, projectId: string): Promise<any>;
   GetSnykAppHost(): string;
+  GetOrgSlug(orgId: string): Promise<string>;
 }
 
 export class SnykApiClient implements SnykApi {
@@ -106,6 +108,27 @@ export class SnykApiClient implements SnykApi {
     return jsonResponse;
   }
 
+  async GetOrgSlug(orgId: string) {
+    const backendBaseUrl = await this.getApiUrl();
+    let v3Headers = this.headers;
+    v3Headers["Content-Type"] = "application/vnd.api+json";
+
+
+    const orgsAPIUrl = `${backendBaseUrl}/rest/orgs/${orgId}?version=2023-06-19~beta`;
+      const orgResponse = await fetch(`${orgsAPIUrl}`, {
+        method: "GET",
+        headers: v3Headers,
+      });
+      if (orgResponse.status >= 400 && orgResponse.status < 600) {
+        throw new Error(
+          `Error ${orgResponse.status} - Failed fetching Org data`
+        );
+      }
+      const orgResponseData = await orgResponse.json()
+      const orgData = orgResponseData.data as OrgData
+      return orgData.attributes.slug
+  }
+
   async ProjectsList(orgId: string, repoName: string) {
     if(repoName == ''){
       throw new Error(
@@ -141,7 +164,7 @@ export class SnykApiClient implements SnykApi {
       }
     }
 
-    const projectsForTargetUrl = `${backendBaseUrl}/rest/orgs/${orgId}/projects?target_id=${targetId}&version=2023-06-19~beta`;
+    const projectsForTargetUrl = `${backendBaseUrl}/rest/orgs/${orgId}/projects?target_id=${targetId}&limit=100&version=2023-06-19~beta`;
     const response = await fetch(`${projectsForTargetUrl}`, {
       method: "GET",
       headers: v3Headers,

diff --git a/src/components/SnykEntityComponent/SnykEntityComponent.tsx b/src/components/SnykEntityComponent/SnykEntityComponent.tsx
@@ -8,7 +8,7 @@ import {
 
 } from "@backstage/core-components";
 import { useApi } from "@backstage/core-plugin-api";
-import { MissingAnnotationEmptyState } from "@backstage/core-components";
+import { MissingAnnotationEmptyState, InfoCard } from "@backstage/core-components";
 import { snykApiRef } from "../../api";
 import { useAsync } from "react-use";
 import { Alert } from "@material-ui/lab";
@@ -103,7 +103,8 @@ export const SnykEntityComponent = () => {
       orgId,
       entity.metadata.annotations?.[SNYK_ANNOTATION_TARGETNAME] || entity.metadata.annotations?.[SNYK_ANNOTATION_TARGETID] || ''
     );
-    return { fullProjectList };
+    const orgSlug = await snykApi.GetOrgSlug(orgId)
+    return { fullProjectList, orgSlug };
   });
   if (loading) {
     return (
@@ -117,24 +118,29 @@ export const SnykEntityComponent = () => {
   }
 
   const projectList = value?.fullProjectList as ProjectsData[];
-
+  const orgSlug = value?.orgSlug || ''
   projectList.forEach((project) => {
     tabs.push({
       name: utils.extractTargetShortname(project.attributes.name || "unknown"),
       icon: getIconForProjectType(project.attributes.origin || ""),
-      tabContent: generateSnykTabForProject(snykApi, orgId, project.id,entity.metadata.annotations?.[SNYK_ANNOTATION_TARGETNAME] || entity.metadata.annotations?.[SNYK_ANNOTATION_TARGETID] || ''),
+      tabContent: generateSnykTabForProject(snykApi, orgId, orgSlug, project.id,entity.metadata.annotations?.[SNYK_ANNOTATION_TARGETNAME] || entity.metadata.annotations?.[SNYK_ANNOTATION_TARGETID] || ''),
       type: project.attributes.type,
     });
   });
 
+    const infoCardTitle = `${tabs.length} Project${tabs.length>1? 's' : '' }`
+
   return (
-
+    <><InfoCard title={infoCardTitle} cardClassName="infocardstyle">
+
       <TabbedLayout>
         {tabs.map(tab => (
-          <TabbedLayout.Route key={tab.name+tab.type} path={tab.name} title={tab.type}>
+          <TabbedLayout.Route key={tab.name+tab.type} path={tab.name} title={`(${tab.type}) ${tab.name.substring(0,15)}${tab.name.length > 15 ? '...':''}`}>
         <Content><tab.tabContent /></Content>
       </TabbedLayout.Route>
         ))}</TabbedLayout>
+  </InfoCard>
+  </>
 
   );
 };
diff --git a/src/components/SnykEntityComponent/snykTab.tsx b/src/components/SnykEntityComponent/snykTab.tsx
@@ -25,6 +25,7 @@ import { Issue, TypeDef, UnifiedIssues } from "../../types/unifiedIssuesTypes";
 export const generateSnykTabForProject = (
   snykApi: SnykApi,
   orgId: string,
+  orgSlug: string,
   projectId: string,
   orgDisplayName?: string
 ) => {
@@ -75,7 +76,7 @@ export const generateSnykTabForProject = (
     };
     const linkInfo = {
       title: "More details",
-      link: `https://${snykApi.GetSnykAppHost()}/org/${orgDisplayName}/project/${projectId}`,
+      link: `https://${snykApi.GetSnykAppHost()}/org/${orgSlug}/project/${projectId}`,
     };
     if(value.depGraph){
       return (

diff --git a/src/types/orgsTypes.ts b/src/types/orgsTypes.ts
@@ -0,0 +1,10 @@
+export interface OrgData {
+        attributes: {
+        group_id?: string,
+        is_personal: boolean,
+        name: string,
+        slug: string
+        }
+        id: string,
+        type: string
+}