92 SBOM page hyperlinks to npm pipy package home

CHANGELOG.md

@@ -23,6 +23,7 @@ _Can be run using `npm run codetotal:beta`_
   - Add a report progress bar
   - Optimize new analysis dialog, drawer and linters list components' renders
   - Fix completed report receiving updates from ongoing analysis
+  - Add link to packages' registry in SBOM panel
   - Fix Safari not showing Score component correctly #81
   - Display "snippet" in results page instead of md5: xxxx
 

package.json

@@ -56,6 +56,6 @@
   "author": "Itay",
   "license": "ISC",
   "dependencies": {
-    "shared-types": "^1.0.0"
+    "@ct/shared-types": "^1.0.0"
   }
 }

packages/app/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "app",
+  "name": "@ct/app",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -28,7 +28,7 @@
     "react-icons": "^4.10.1",
     "react-router-dom": "^6.13.0",
     "react-syntax-highlighter": "^15.5.0",
-    "shared-types": "^1.0.0",
+    "@ct/shared-types": "^1.0.0",
     "tss-react": "^4.8.6",
     "zustand": "^4.3.8"
   },

packages/app/src/analysis/actions/analysis-actions.ts

@@ -1,11 +1,11 @@
-import axios from "axios";
 import {
   Analysis,
   AnalysisType,
   FileAnalysis,
   RepoAnalysis,
   SnippetAnalysis,
-} from "shared-types";
+} from "@ct/shared-types";
+import axios from "axios";
 import { ApiUrl } from "../../common/utils/backend-url";
 import { AnalysisStore, AsyncState } from "../stores/analysis-store";
 

packages/app/src/analysis/actions/analysis-language-actions.ts

@@ -1,4 +1,4 @@
-import { ProgrammingLanguage } from "shared-types";
+import { ProgrammingLanguage } from "@ct/shared-types";
 import { fetchDetect } from "../../languages/actions/detect-language-actions";
 import { AnalysisStore } from "../stores/analysis-store";
 
@@ -19,6 +19,8 @@ export const clearLanguages = () => {
   });
 };
 
-export const setUserSelectedLanguage = (newValue: ProgrammingLanguage | undefined) => {
-    AnalysisStore.setState({ userSelectedLanguage: newValue });
-}
+export const setUserSelectedLanguage = (
+  newValue: ProgrammingLanguage | undefined
+) => {
+  AnalysisStore.setState({ userSelectedLanguage: newValue });
+};

packages/app/src/analysis/components/AnalysisInputForm.tsx

@@ -1,6 +1,6 @@
+import { AnalysisType, OneOfValues } from "@ct/shared-types";
 import { Alert, Paper, Tab, Tabs, Theme } from "@mui/material";
 import { FC, useCallback } from "react";
-import { AnalysisType, OneOfValues } from "shared-types";
 import { makeStyles } from "tss-react/mui";
 import { startAnalysis } from "../actions/analysis-actions";
 import { AnalysisStore, useAnalysisStore } from "../stores/analysis-store";

packages/app/src/analysis/components/AnalysisTabPanel.tsx

@@ -1,6 +1,6 @@
+import { AnalysisType, OneOfValues } from "@ct/shared-types";
 import { Box } from "@mui/material";
 import { FC, PropsWithChildren } from "react";
-import { AnalysisType, OneOfValues } from "shared-types";
 
 export const AnalysisTabPanel: FC<PropsWithChildren<AnalysisTabPanelProps>> = (
   props

packages/app/src/analysis/stores/analysis-store.ts

@@ -1,4 +1,8 @@
-import { AnalysisType, OneOfValues, ProgrammingLanguage } from "shared-types";
+import {
+  AnalysisType,
+  OneOfValues,
+  ProgrammingLanguage,
+} from "@ct/shared-types";
 import { useStore } from "zustand";
 import { createStore } from "zustand/vanilla";
 

packages/app/src/common/SeverityBadge.tsx

@@ -1,10 +1,10 @@
+import { OneOfValues, Severity } from "@ct/shared-types";
 import { Theme, Typography } from "@mui/material";
 import { FC } from "react";
 import { BsExclamation } from "react-icons/bs";
 import { IoMdCheckmarkCircleOutline } from "react-icons/io";
 import { MdErrorOutline, MdOutlineWarningAmber } from "react-icons/md";
 import { TbUrgent } from "react-icons/tb";
-import { OneOfValues, Severity } from "shared-types";
 import { makeStyles } from "tss-react/mui";
 
 export const SeverityBadge: FC<SeverityBadgeProps> = ({ severity }) => {

packages/app/src/languages/actions/detect-language-actions.ts

@@ -1,6 +1,6 @@
+import { ProgrammingLanguage } from "@ct/shared-types";
 import axios from "axios";
 import debounce from "lodash-es/debounce";
-import { ProgrammingLanguage } from "shared-types";
 import { ApiUrl } from "../../common/utils/backend-url";
 import { LanguagesStore } from "../stores/languages-store";
 

packages/app/src/languages/actions/language-actions.ts

@@ -1,5 +1,5 @@
+import { ProgrammingLanguage } from "@ct/shared-types";
 import axios from "axios";
-import { ProgrammingLanguage } from "shared-types";
 import { ApiUrl } from "../../common/utils/backend-url";
 import { LanguagesStore } from "../stores/languages-store";
 

packages/app/src/languages/components/LanguageIcon.tsx

@@ -1,6 +1,6 @@
+import { ProgrammingLanguage } from "@ct/shared-types";
 import { Theme, Typography, useTheme } from "@mui/material";
 import { FC } from "react";
-import { ProgrammingLanguage } from "shared-types";
 import { makeStyles } from "tss-react/mui";
 
 export const LanguageIcon: FC<LanguageIconProps> = ({

packages/app/src/languages/components/LanguageSelector.tsx

@@ -1,3 +1,4 @@
+import { ProgrammingLanguage } from "@ct/shared-types";
 import {
   Autocomplete,
   CircularProgress,
@@ -9,7 +10,6 @@ import {
   useTheme,
 } from "@mui/material";
 import React, { FC, SyntheticEvent, useCallback } from "react";
-import { ProgrammingLanguage } from "shared-types";
 import { loadAllLanguages } from "../actions/language-actions";
 import { useLanguagesStore } from "../stores/languages-store";
 import { LanguageIcon } from "./LanguageIcon";

packages/app/src/languages/stores/languages-store.ts

@@ -1,4 +1,4 @@
-import { ProgrammingLanguage } from "shared-types";
+import { ProgrammingLanguage } from "@ct/shared-types";
 import { useStore } from "zustand";
 import { createStore } from "zustand/vanilla";
 

packages/app/src/report/actions/init-report-action.ts

@@ -1,5 +1,5 @@
+import { AnalysisStatus } from "@ct/shared-types";
 import axios from "axios";
-import { AnalysisStatus } from "shared-types";
 import { ApiUrl } from "../../common/utils/backend-url";
 import { ReportStore } from "../stores/fe-report-store";
 import { subscribeToReportProgress } from "./subscribe-report-action";

packages/app/src/report/actions/selected-linter-actions.ts

@@ -1,4 +1,4 @@
-import { Linter } from "shared-types";
+import { Linter } from "@ct/shared-types";
 import { ReportStore } from "../stores/fe-report-store";
 import { SelectedLinterStore } from "../stores/selected-linter-store";
 

packages/app/src/report/actions/subscribe-report-action.ts

@@ -1,4 +1,4 @@
-import { AnalysisStatus, ReportState } from "shared-types";
+import { AnalysisStatus, ReportState } from "@ct/shared-types";
 import { ReportStore } from "../stores/fe-report-store";
 import { subscribe } from "../utils/ws-client";
 

packages/app/src/report/components/details/Details.tsx

@@ -1,6 +1,6 @@
+import { AnalysisStatus, AnalysisType } from "@ct/shared-types";
 import { Paper, Theme, Typography } from "@mui/material";
 import { FC } from "react";
-import { AnalysisStatus, AnalysisType } from "shared-types";
 import { makeStyles } from "tss-react/mui";
 import { Loader } from "../../../common/Loader";
 import { useReportStore } from "../../stores/fe-report-store";

packages/app/src/report/components/details/FileInfo.tsx

@@ -1,6 +1,6 @@
+import { FileDetails } from "@ct/shared-types";
 import { filesize } from "filesize";
 import { FC } from "react";
-import { FileDetails } from "shared-types";
 import { DetailsItem } from "./DetailsItem";
 
 export const FileInfo: FC<FileInfoProps> = ({ fileDetails }) => {

packages/app/src/report/components/details/RepoInfo.tsx

@@ -1,6 +1,6 @@
+import { RepoDetails } from "@ct/shared-types";
 import { Theme, Typography } from "@mui/material";
 import { FC } from "react";
-import { RepoDetails } from "shared-types";
 import { makeStyles } from "tss-react/mui";
 import { DetailsItem } from "./DetailsItem";
 

packages/app/src/report/components/detection/LinterListItem.tsx

@@ -1,6 +1,6 @@
+import { Linter } from "@ct/shared-types";
 import { ListItem, ListItemButton, Theme, Typography } from "@mui/material";
 import { FC, memo } from "react";
-import { Linter } from "shared-types";
 import { makeStyles } from "tss-react/mui";
 import { selectLinter } from "../../actions/selected-linter-actions";
 import { LinterLogo } from "./LinterLogo";

packages/app/src/report/components/detection/LinterLogo.tsx

@@ -1,6 +1,6 @@
+import { Linter } from "@ct/shared-types";
 import { Theme, Typography } from "@mui/material";
 import { FC } from "react";
-import { Linter } from "shared-types";
 import { makeStyles } from "tss-react/mui";
 import { ReactComponent as CheckovLogo } from "../../../assets/linters/checkov.svg";
 import { ReactComponent as DevSkimLogo } from "../../../assets/linters/devskim.svg";

packages/app/src/report/components/drawer/IssuesTable.tsx

@@ -1,5 +1,5 @@
+import { Issue } from "@ct/shared-types";
 import { FC, useMemo } from "react";
-import { Issue } from "shared-types";
 import { ResponsiveTable, TableOptions } from "../../../common/ResponsiveTable";
 import { SeverityBadge } from "../../../common/SeverityBadge";
 

packages/app/src/report/components/header/ReportHeader.tsx

@@ -1,3 +1,4 @@
+import { AnalysisType } from "@ct/shared-types";
 import {
   Divider,
   LinearProgress,
@@ -8,7 +9,6 @@ import {
   useTheme,
 } from "@mui/material";
 import { FC } from "react";
-import { AnalysisType } from "shared-types";
 import { makeStyles } from "tss-react/mui";
 import { LanguageIcon } from "../../../languages/components/LanguageIcon";
 import { useReportStore } from "../../stores/fe-report-store";

packages/app/src/report/components/sbom/SBOM.tsx

@@ -1,6 +1,6 @@
+import { AnalysisStatus } from "@ct/shared-types";
 import { Paper } from "@mui/material";
 import { FC } from "react";
-import { AnalysisStatus } from "shared-types";
 import { Loader } from "../../../common/Loader";
 import { useReportStore } from "../../stores/fe-report-store";
 import { SBOMTable } from "./SBOMTable";

packages/app/src/report/components/sbom/SBOMTable.tsx

@@ -1,8 +1,9 @@
+import { SbomPackage } from "@ct/shared-types";
 import { FC } from "react";
-import { SbomPackage } from "shared-types";
 import { ResponsiveTable, TableOptions } from "../../../common/ResponsiveTable";
 import { SeverityBadge } from "../../../common/SeverityBadge";
 import { useReportStore } from "../../stores/fe-report-store";
+import { SBOMTableNameCell } from "./SBOMTableNameCell";
 
 export const SBOMTable: FC = () => {
   const { packages } = useReportStore();
@@ -12,14 +13,20 @@ export const SBOMTable: FC = () => {
 const tableOptions: TableOptions<SbomPackage> = {
   emptyMessage: "No packages information found",
   cells: [
-    { label: "Name", key: "packageName" },
+    {
+      label: "Name",
+      cellRenderer: (row) => <SBOMTableNameCell pkg={row} />,
+    },
     { label: "Version", key: "packageVersion" },
     {
       label: "Severity",
       cellRenderer: (row) => <SeverityBadge severity={row.severity} />,
     },
     { label: "License", key: "license" },
-    { label: "Registry", key: "registry" },
+    {
+      label: "Registry",
+      cellRenderer: (row) => row.registry || "Unknown",
+    },
     { label: "File Path", key: "filePath" },
   ],
 };