Feat: Pattern dictionary

package.json

@@ -1,6 +1,6 @@
 {
  "name": "suscode",
- "displayName": "Suscode",
+ "displayName": "SusCode",
  "description": "Extension scanning application",
  "version": "0.0.1",
  "engines": {
@@ -12,12 +12,21 @@
  "activationEvents": [],
  "main": "./dist/extension.js",
  "contributes": {
+ "viewsContainers": {
+ "activitybar": [
+ {
+ "id": "suscode-extensions-list",
+ "title": "SusCode",
+ "icon": "src/assets/magnifying-glass.png"
+ }
+ ]
+ },
  "views": {
- "explorer": [
+ "suscode-extensions-list": [
  {
  "type": "webview",
  "id": "ExtensionsSidebarViewProvider",
- "name": "Suscode"
+ "name": "Extension Selector"
  }
  ]
  },

src/panel/components/dependencyChecker.tsx

@@ -1,32 +1,56 @@
 import * as React from 'react';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
-export default function dependencyCheck(props:any) {
+export default function dependencyCheck(props: any) {
  const { depResults } = props;
  if (depResults.length === 0) {
- return(<div>No dependencies packages vulnerbilities found through OSV API</div>);
+ return (
+ <div>No dependencies packages vulnerbilities found through OSV API</div>
+ );
  }
- const packAndVulns = depResults.map((elObj:any) => {
+ const packAndVulns = depResults.map((elObj: any) => {
  const fetchReturn = elObj[1].vulns;
  // takes all the vulnerable types and makes hyperlink to attach to the package name
- const vulData = fetchReturn.map((vulType: {id:string, modified:string}) => {
- return(
- <div>
- id: <a href={`https://github.com/advisories/${vulType.id}`}>{vulType.id}</a> <br/>
- modified: {vulType.modified} 
- </div>
- );
- });
+ const vulData = fetchReturn.map(
+ (vulType: { id: string; modified: string }) => {
+ return (
+ <div>
+ id:{' '}
+ <a href={`https://github.com/advisories/${vulType.id}`}>
+ {vulType.id}
+ </a>{' '}
+ <br />
+ modified: {vulType.modified}
+ </div>
+ );
+ }
+ );
  // for each package
- return (<div>
- <strong>Package: {elObj[0].package.name} on version: {elObj[0].version} </strong>
- {vulData}
- <br/>
- </div>);
+ return (
+ <Accordion
+ sx={{
+ backgroundColor: 'inherit',
+ color: 'rgb(191 182 182 / 60%)',
+ boxShadow: 5,
+ }}
+ >
+ <AccordionSummary
+ sx={{ color: 'rgb(231 231 231 / 60%)' }}
+ expandIcon={<ExpandMoreIcon />}
+ aria-controls='panel1-content'
+ id='panel1-header'
+ >
+ <strong>
+ Package: {elObj[0].package.name} on version: {elObj[0].version}{' '}
+ </strong>
+ </AccordionSummary>
+ <AccordionDetails>{vulData}</AccordionDetails>
+ </Accordion>
+ );
  });
  // return entire test result
- return (
- <div>
- {packAndVulns}
- </div>
- );
-}
+ return <div>{packAndVulns}</div>;
+}

src/panel/components/patternInfo.tsx

@@ -0,0 +1,47 @@
+// import { patternDictionary } from '../../patternDictionary';
+import * as React from 'react';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { infoObj } from '../../types';
+import getPatternDictionary from '../../patternDictionary';
+
+export default function PatternInfo(props: any) {
+ let patternDictionary = getPatternDictionary();
+
+ const { patternNames } = props;
+ let patternInfoObj: infoObj;
+ //iterate through the dictionary and grab the object where the current pattern name is a match with the regex expression
+ const accordianLayers = patternNames.map((patternName: any) => {
+ patternDictionary.forEach((patternObj: any) => {
+ if (patternName.includes(patternObj.pattern)) {
+ patternInfoObj = patternObj;
+ }
+ });
+
+ return (
+ <Accordion
+ sx={{
+ backgroundColor: 'inherit',
+ color: 'rgb(191 182 182 / 60%)',
+ boxShadow: 5,
+ }}
+ >
+ <AccordionSummary
+ sx={{ color: 'rgb(231 231 231 / 60%)' }}
+ expandIcon={<ExpandMoreIcon />}
+ aria-controls='panel1-content'
+ id='panel1-header'
+ >
+ {patternInfoObj.heading}
+ </AccordionSummary>
+ <AccordionDetails>{patternInfoObj.info}</AccordionDetails>
+ </Accordion>
+ );
+ });
+
+ return <div>{accordianLayers}</div>;
+}
+
+module.exports = PatternInfo;

src/panel/components/readMeDiv.tsx

@@ -4,6 +4,7 @@ import Tooltip from '@mui/material/Tooltip';
 import IconButton from '@mui/material/IconButton';
 import LibraryBooksSharpIcon from '@mui/icons-material/LibraryBooksSharp';
 import ReadMeModal from './readMeModal';
+import { Typography } from '@mui/material';
 
 export default function ReadMeDiv(props: any) {
  const [open, setOpen] = useState<boolean>(false);
@@ -15,9 +16,14 @@ export default function ReadMeDiv(props: any) {
  return (
  <div>
  <IconButton onClick={handleOpen}>
- <Tooltip title='Learn about this Extension' placement='left-end'>
+ <Tooltip
+ title='Learn about this Extension'
+ placement='left-end'
+ color='primary'
+ >
  <LibraryBooksSharpIcon />
  </Tooltip>
+ <Typography color='#b3b3b5'> Extension Description</Typography>
  </IconButton>
  <ReadMeModal
  handleClose={handleClose}

src/panel/components/readMeModal.tsx

@@ -13,9 +13,11 @@ export default function ReadMeModal(props: any) {
  transform: 'translate(-50%, -50%)',
  width: 400,
  bgcolor: 'background.paper',
+ color: 'inherit',
  border: '2px solid #000',
  boxShadow: 24,
  p: 4,
+ backdropFilter: 'blur(5px)',
  };
  return (
  <Modal

src/panel/components/results.tsx

@@ -1,13 +1,44 @@
 import * as React from 'react';
 import PatternSearchResults from './searchResultComponents/patternSearchResults';
 import TelemetrySearchResults from './searchResultComponents/telemetrySearchResults';
+import Paper from '@mui/material/Paper';
+import Divider from '@mui/material/Divider';
+import Chip from '@mui/material/Chip';
 
 export default function Results(props: any) {
  const { patternMatchPanelResults, telemetryMatchPanelResults } = props;
  return (
  <div>
- <PatternSearchResults results={patternMatchPanelResults} />
- <TelemetrySearchResults results={telemetryMatchPanelResults} />
+ <Divider sx={{ marginTop: '8px', marginBottom: '8px' }}>
+ <Chip label='PATTERNS FOUND' variant='outlined' color='primary' />
+ </Divider>
+ <Paper
+ style={{
+ maxHeight: 300,
+ overflow: 'auto',
+ background: 'inherit',
+ }}
+ elevation={4}
+ >
+ <PatternSearchResults results={patternMatchPanelResults} />
+ </Paper>
+ <Divider sx={{ marginTop: '8px', marginBottom: '8px' }}>
+ <Chip
+ label='POTENTIAL TELEMETRY INTERACTIONS'
+ variant='outlined'
+ color='primary'
+ />
+ </Divider>
+ <Paper
+ style={{
+ maxHeight: 300,
+ overflow: 'auto',
+ background: 'inherit',
+ }}
+ elevation={4}
+ >
+ <TelemetrySearchResults results={telemetryMatchPanelResults} />
+ </Paper>
  </div>
  );
 }

src/panel/components/searchResultComponents/patternSearchResults.tsx

@@ -1,3 +1,4 @@
+import Typography from '@mui/material/Typography';
 import * as React from 'react';
 
 export default function PatternSearchResults(props: any) {
@@ -6,10 +7,16 @@ export default function PatternSearchResults(props: any) {
  return Math.random() * 100;
  }
  const resultPhrases = results.map((funcObj: any) => {
+ if (!funcObj.name) {
+ }
  return (
- <div key={getRandom()}>
+ <Typography
+ key={getRandom()}
+ variant='subtitle1'
+ sx={{ marginLeft: '8px', color: '#b3b3b5' }}
+ >
  <strong>{funcObj.name}</strong> was found {funcObj.count} times.
- </div>
+ </Typography>
  );
  });
 

src/panel/components/searchResultComponents/telemetrySearchResults.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Box from '@mui/material/Box';
 
 interface ClickableLinkProps {
  file: string;
@@ -7,7 +8,12 @@ interface ClickableLinkProps {
  text: string;
 }
 
-const ClickableLink: React.FC<ClickableLinkProps> = ({ file, line, column, text }) => {
+const ClickableLink: React.FC<ClickableLinkProps> = ({
+ file,
+ line,
+ column,
+ text,
+}) => {
  const href = encodeURI(`vscode://file/${file}:${line}:${column}`);
  return <a href={href}>{text}</a>;
 };
@@ -18,20 +24,18 @@ export default function TelemetrySearchResults(props: any) {
  // return Math.random() * 100;
  // }
 
- console.log('inside the tele tsx file!', results)
+ // console.log('inside the tele tsx file!', results)
  if (!results.length) {
  return (
  //'No potential network requests found.'
- <div>
- {results[0]}
- </div>
- )
+ <div>{results[0]}</div>
+ );
  }
 
  return (
- <div>
+ <Box sx={{ color: 'rgb(191 182 182 / 60%)', padding: '4px 2px' }}>
  {results.map((result: any, index: any) => (
- <div key={index} style={{ marginBottom: '20px' }}>
+ <Box key={index} style={{ marginBottom: '20px', padding: '4px 4px' }}>
  <div>File: {result.file}</div>
  {result.originalFile && (
  <div>
@@ -40,7 +44,7 @@ export default function TelemetrySearchResults(props: any) {
  file={result.originalFile}
  line={result.originalLine!}
  column={result.originalColumn!}
- text="Original Source"
+ text='Original Source'
  />
  </div>
  )}
@@ -50,12 +54,12 @@ export default function TelemetrySearchResults(props: any) {
  file={result.file}
  line={result.line}
  column={result.column}
- text="Minified Source"
+ text='Minified Source'
  />
  </div>
  <div>URL: {result.url}</div>
- </div>
+ </Box>
  ))}
- </div>
+ </Box>
  );
 }

src/panel/components/tabContext.tsx

@@ -12,7 +12,8 @@ import TabPanels from './tabPanels';
 
 export default function TabContextDiv(props: any) {
  const [value, setValue] = useState<number>(0);
- const { displayNames, patternMatchPanelState, telemetryPanelState, readMe } = props;
+ const { displayNames, patternMatchPanelState, telemetryPanelState, readMe } =
+ props;
 
  return (
  <TabContext value={value}>
@@ -21,7 +22,7 @@ export default function TabContextDiv(props: any) {
  borderBottom: 2,
  borderColor: 'divider',
  bgcolor: 'inherit',
- width: 500,
+ width: 'auto',
  }}
  >
  <Tabs displayNames={displayNames} setValue={setValue} />