Merge pull request #372 from sherlock-protocol/feat/scoping-v2

feat: scoping v2

Author: Evert0x

src/components/Text/Text.module.scss

@@ -7,6 +7,14 @@
     color: red;
   }
 
+  &.info {
+    color: #ffa837;
+  }
+
+  &.success {
+    color: #58c322;
+  }
+
   &.strong {
     font-weight: 700;
   }

src/components/Text/Text.tsx

@@ -5,7 +5,7 @@ import styles from "./Text.module.scss"
 
 type TextSize = "tiny" | "small" | "normal" | "large" | "extra-large"
 
-type TextVariant = "normal" | "primary" | "secondary" | "alternate" | "mono" | "warning"
+type TextVariant = "normal" | "primary" | "secondary" | "alternate" | "mono" | "warning" | "success" | "info"
 
 type TextAlignment = "center" | "left" | "right" | "justify"
 

src/hooks/api/admin/useAdminContestScope.ts

@@ -8,7 +8,11 @@ type AdminContestScopeResponse = {
     repo_name: string
     branch_name: string
     commit_hash: string
-    files: string[]
+    files: {
+      file_path: string
+      nsloc?: number
+      selected: boolean
+    }[]
     solidity_metrics_report: string
     nsloc: number
     comment_to_source_ratio: number
@@ -17,14 +21,18 @@ type AdminContestScopeResponse = {
 
 export const adminContestScopeQuery = (contestID: number) => ["admin-contest-scope", contestID]
 export const useAdminContestScope = (contestID: number) =>
-  useQuery<Scope, Error>(adminContestScopeQuery(contestID), async () => {
+  useQuery<Scope[], Error>(adminContestScopeQuery(contestID), async () => {
     const { data } = await contestsAPI.get<AdminContestScopeResponse>(getAdminContestScopeUrl(contestID))
 
     return data.scope.map((d) => ({
       repoName: d.repo_name,
       branchName: d.branch_name,
       commitHash: d.commit_hash,
-      files: d.files,
+      files: d.files.map((f) => ({
+        filePath: f.file_path,
+        nSLOC: f.nsloc,
+        selected: f.selected,
+      })),
       solidityMetricsReport: d.solidity_metrics_report,
       nSLOC: d.nsloc,
       commentToSourceRatio: d.comment_to_source_ratio,

src/hooks/api/scope/useDeleteScope.ts

@@ -36,7 +36,7 @@ export const useDeleteScope = () => {
 
         const previousScope = queryClient.getQueryData<Scope>(scopeQueryKey(params.protocolDashboardID))
 
-        queryClient.setQueryData<Scope | undefined>(scopeQueryKey(params.protocolDashboardID), (previous) =>
+        queryClient.setQueryData<Scope[] | undefined>(scopeQueryKey(params.protocolDashboardID), (previous) =>
           previous?.filter((s) => s.repoName !== params.repoName)
         )
 

src/hooks/api/scope/useRepositoryContracts.ts

@@ -4,53 +4,104 @@ import { getRepositoryContracts as getRepositoryContractsUrl } from "../urls"
 
 type GetRepositoryContractsResponse = string[]
 
-export type TreeValue = Tree | string
-export interface Tree extends Map<string, TreeValue> {}
-
-export const getAllTreePaths = (parentPath: string, tree: TreeValue) => {
-  if (typeof tree === "string") {
-    return [`${parentPath}`]
-  }
+type File = {
+  filepath: string
+  nsloc?: number
+}
 
-  let paths: string[] = []
+interface BaseEntry {
+  name: string
+}
 
-  tree.forEach((value, key) => {
-    paths = [...paths, ...getAllTreePaths(`${parentPath}/${key}`, value)]
-  })
+export interface FileEntry extends BaseEntry {
+  type: "file"
+  filepath: string
+  nsloc?: number
+}
 
-  return paths
+interface DirectoryEntry extends BaseEntry {
+  type: "directory"
+  entries: Array<Entry>
 }
 
-type Files = {
-  tree: Tree
-  rawPaths: string[]
+export type Entry = FileEntry | DirectoryEntry
+
+type AnyEntry = RootDirectory | DirectoryEntry
+
+export interface RootDirectory {
+  type: "root"
+  entries: Array<Entry>
 }
 
-export const convertToTree = (paths: string[]) => {
-  const tree: Tree = new Map()
+export const convertToTree2 = (files: File[]) => {
+  const root: RootDirectory = {
+    type: "root",
+    entries: [],
+  }
+
+  files.forEach(({ filepath, nsloc }) => {
+    const parts = filepath.split("/")
+
+    let current: AnyEntry = root
 
-  paths.forEach((d) => {
-    const parts = d.split("/")
-    let current: Tree = tree
     parts.forEach((p) => {
       if (p.endsWith(".sol") || p.endsWith(".vy")) {
-        current.set(p, p)
+        current.entries.push({
+          type: "file",
+          name: p,
+          filepath,
+          nsloc,
+        })
       } else {
-        if (!current.get(p)) current.set(p, new Map())
-        current = current.get(p) as Tree
+        let directory: DirectoryEntry | undefined = current.entries.find(
+          (e) => e.type === "directory" && e.name === p
+        ) as DirectoryEntry
+
+        if (!directory) {
+          directory = {
+            type: "directory",
+            name: p,
+            entries: [],
+          }
+          current.entries.push(directory)
+        }
+
+        current = directory
       }
     })
   })
 
-  return tree
+  return root
+}
+
+export type TreeValue = Tree | string
+export interface Tree extends Map<string, TreeValue> {}
+
+export const getAllTreePaths = (parentPath: string, tree: Entry) => {
+  if (tree.type === "file") {
+    return [`${parentPath}`]
+  }
+
+  let paths: string[] = []
+
+  tree.entries.forEach((value, key) => {
+    paths = [...paths, ...getAllTreePaths(`${parentPath}/${value.name}`, value)]
+  })
+
+  return paths
+}
+
+type RepositoryContracts = {
+  tree: RootDirectory
+  rawPaths: string[]
 }
 
 export const repositoryContractsQuery = (repo: string, commit: string) => ["repository-contracts", repo, commit]
 export const useRepositoryContracts = (repo: string, commit: string) =>
-  useQuery<Files, Error>(repositoryContractsQuery(repo, commit), async () => {
+  useQuery<RepositoryContracts, Error>(repositoryContractsQuery(repo, commit), async () => {
     const { data } = await contestsAPI.get<GetRepositoryContractsResponse>(getRepositoryContractsUrl(repo, commit))
 
-    const tree = convertToTree(data)
+    const tree = convertToTree2(data.map((f) => ({ filepath: f })))
 
     return {
       tree,

src/hooks/api/scope/useScope.ts

@@ -6,38 +6,56 @@ export type Scope = {
   repoName: string
   branchName: string
   commitHash: string
-  files: string[]
+  files: {
+    filePath: string
+    nSLOC?: number
+    selected: boolean
+  }[]
   solidityMetricsReport?: string
-  nSLOC?: number
   commentToSourceRatio?: number
-}[]
+  initialScope?: Scope
+}
 
-export type GetScopeResponse = {
-  scope: {
-    repo_name: string
-    branch_name: string
-    commit_hash: string
-    files: string[]
+type ScopeResponse = {
+  repo_name: string
+  branch_name: string
+  commit_hash: string
+  files: {
+    file_path: string
     nsloc?: number
-    comment_to_source_ratio?: number
+    selected: boolean
   }[]
+  comment_to_source_ratio?: number
+  initial_scope?: Omit<ScopeResponse, "initial_scope">
+}
+
+export type GetScopeResponse = {
+  scope: ScopeResponse[]
+}
+
+function parseScope(d: ScopeResponse): Scope {
+  return {
+    repoName: d.repo_name,
+    branchName: d.branch_name,
+    commitHash: d.commit_hash,
+    files: d.files.map((f) => ({
+      filePath: f.file_path,
+      nSLOC: f.nsloc,
+      selected: f.selected,
+    })),
+    commentToSourceRatio: d.comment_to_source_ratio,
+    initialScope: d.initial_scope ? parseScope(d.initial_scope) : undefined,
+  }
 }
 
 export const scopeQueryKey = (dashboardID?: string) => ["scope", dashboardID]
 export const useScope = (dashboardID?: string) =>
-  useQuery<Scope, Error>(
+  useQuery<Scope[], Error>(
     scopeQueryKey(dashboardID),
     async () => {
       const { data } = await contestsAPI.get<GetScopeResponse>(getScopeUrl(dashboardID ?? ""))
 
-      return data.scope.map((d) => ({
-        repoName: d.repo_name,
-        branchName: d.branch_name,
-        commitHash: d.commit_hash,
-        files: d.files,
-        nSLOC: d.nsloc,
-        commentToSourceRatio: d.comment_to_source_ratio,
-      }))
+      return data.scope.map(parseScope)
     },
     {
       enabled: !!dashboardID,

src/hooks/api/scope/useUpdateScope.ts

@@ -14,7 +14,7 @@ type UpdateScopeParams = {
 }
 
 type UpdateScopeContext = {
-  previousScope?: Scope
+  previousScope?: Scope[]
 }
 
 export const useUpdateScope = () => {
@@ -38,11 +38,9 @@ export const useUpdateScope = () => {
     },
     {
       onMutate: async (params) => {
-        await queryClient.invalidateQueries(scopeQueryKey(params.protocolDashboardID))
+        const previousScope = queryClient.getQueryData<Scope[]>(scopeQueryKey(params.protocolDashboardID))
 
-        const previousScope = queryClient.getQueryData<Scope>(scopeQueryKey(params.protocolDashboardID))
-
-        queryClient.setQueryData<Scope | undefined>(scopeQueryKey(params.protocolDashboardID), (previous) => {
+        queryClient.setQueryData<Scope[] | undefined>(scopeQueryKey(params.protocolDashboardID), (previous) => {
           if (!previous) return
 
           const scopeIndex = previous.findIndex((s) => s.repoName === params.repoName)
@@ -54,7 +52,13 @@ export const useUpdateScope = () => {
                 repoName: previous[scopeIndex].repoName,
                 branchName: params.branchName ?? previous[scopeIndex].branchName,
                 commitHash: params.commitHash ?? previous[scopeIndex].commitHash,
-                files: params.files ?? previous[scopeIndex].files,
+                files: params.files
+                  ? previous[scopeIndex].files.map((f) => ({
+                      ...f,
+                      selected: params.files!.includes(f.filePath),
+                    }))
+                  : previous[scopeIndex].files,
+                initialScope: previous[scopeIndex].initialScope,
               },
               ...previous.slice(scopeIndex + 1),
             ]

src/pages/AuditScope/AuditScope.module.scss

@@ -77,6 +77,11 @@
             opacity: 1;
           }
         }
+
+        .addedNSLOC {
+          color: #58c322;
+          font-weight: bold;
+        }
       }
     }
   }
@@ -104,3 +109,20 @@
     }
   }
 }
+
+.nslocDiff {
+  color: #ffa837 !important;
+}
+
+.fileAdded {
+  color: #91e467 !important;
+}
+
+.fileRemoved {
+  color: #ef3131 !important;
+  opacity: 1 !important;
+}
+
+.fileSame {
+  color: $primary-purple !important;
+}