vulnWelcomeView (#2342)

### What's done: * Added vulnWelcomeView * Added vulnerability info cards
saveourtool · Jul 17, 2023 · 33aac4a · 33aac4a
1 parent 2806cb9
commit 33aac4a
Show file tree

Hide file tree

Showing 42 changed files with 439 additions and 164 deletions.
diff --git a/save-cloud-common/src/commonMain/kotlin/com/saveourtool/save/validation/FrontendRoutes.kt b/save-cloud-common/src/commonMain/kotlin/com/saveourtool/save/validation/FrontendRoutes.kt
@@ -23,6 +23,7 @@ enum class FrontendRoutes(val path: String) {
     CREATE_PROJECT("create-project"),
     CREATE_VULNERABILITY("vuln/create-vulnerability"),
     DEMO("demo"),
+    INDEX(""),
     MANAGE_ORGANIZATIONS("organizations"),
     NOT_FOUND("not-found"),
     PROFILE("profile"),
@@ -35,7 +36,8 @@ enum class FrontendRoutes(val path: String) {
     SETTINGS_PROFILE("settings/profile"),
     SETTINGS_TOKEN("settings/token"),
     TOP_RATING("top-rating"),
-    VULNERABILITIES("vuln"),
+    VULN("vuln"),
+    VULNERABILITIES("$VULN/list"),
     ;
 
     override fun toString(): String = path

diff --git a/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/App.kt b/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/App.kt
@@ -8,7 +8,7 @@ import com.saveourtool.save.*
 import com.saveourtool.save.domain.Role
 import com.saveourtool.save.frontend.components.*
 import com.saveourtool.save.frontend.components.basic.scrollToTopButton
-import com.saveourtool.save.frontend.components.topbar.topBar
+import com.saveourtool.save.frontend.components.topbar.topBarComponent
 import com.saveourtool.save.frontend.externals.modal.ReactModal
 import com.saveourtool.save.frontend.http.getUser
 import com.saveourtool.save.frontend.routing.basicRouting
@@ -30,14 +30,12 @@ import kotlinx.coroutines.await
 import kotlinx.coroutines.launch
 import kotlinx.serialization.json.Json
 
-internal val topBarComponent = topBar()
-
 /**
  * Top-level state of the whole App
  */
 external interface AppState : State {
     /**
-     * Currently logged in user or null
+     * Currently logged-in user or null
      */
     var userInfo: UserInfo?
 }

diff --git a/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/ErrorBoundary.kt b/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/ErrorBoundary.kt
@@ -4,8 +4,8 @@
 
 package com.saveourtool.save.frontend.components
 
+import com.saveourtool.save.frontend.components.topbar.topBarComponent
 import com.saveourtool.save.frontend.components.views.FallbackView
-import com.saveourtool.save.frontend.topBarComponent
 
 import js.core.jso
 import react.Component

diff --git a/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/HasErrorModal.kt b/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/HasErrorModal.kt
@@ -4,9 +4,9 @@ package com.saveourtool.save.frontend.components
 
 import com.saveourtool.save.frontend.components.modal.loaderModalStyle
 import com.saveourtool.save.frontend.components.modal.modal
+import com.saveourtool.save.frontend.components.topbar.topBarComponent
 import com.saveourtool.save.frontend.components.views.FallbackView
 import com.saveourtool.save.frontend.externals.animations.ringLoader
-import com.saveourtool.save.frontend.topBarComponent
 import com.saveourtool.save.info.UserInfo
 
 import js.core.jso

diff --git a/...aveourtool/save/frontend/components/basic/organizations/OrganizationVulnerabilitiesTab.kt b/...aveourtool/save/frontend/components/basic/organizations/OrganizationVulnerabilitiesTab.kt
@@ -31,7 +31,7 @@ private val vulnerabilityTable: FC<TableProps<VulnerabilityDto>> = tableComponen
                 Fragment.create {
                     td {
                         Link {
-                            to = "/${FrontendRoutes.VULNERABILITIES}/${cellContext.row.original.name}"
+                            to = "/${FrontendRoutes.VULN}/${cellContext.row.original.name}"
                             +cellContext.value
                         }
                     }

diff --git a/...main/kotlin/com/saveourtool/save/frontend/components/basic/projects/ProjectProblemView.kt b/...main/kotlin/com/saveourtool/save/frontend/components/basic/projects/ProjectProblemView.kt
@@ -204,7 +204,7 @@ val projectProblem: FC<ProjectProblemViewProps> = FC {props ->
                                             a {
                                                 projectProblem.vulnerabilityName?.let {
                                                     Link {
-                                                        to = "/${FrontendRoutes.VULNERABILITIES}/${projectProblem.vulnerabilityName}"
+                                                        to = "/${FrontendRoutes.VULN}/${projectProblem.vulnerabilityName}"
                                                         +it
                                                     }
                                                 } ?: +"No known CVE"

diff --git a/...d/src/main/kotlin/com/saveourtool/save/frontend/components/inputform/InputWithDebounce.kt b/...d/src/main/kotlin/com/saveourtool/save/frontend/components/inputform/InputWithDebounce.kt
@@ -24,7 +24,6 @@ import web.timers.setTimeout
 import kotlin.time.Duration.Companion.milliseconds
 
 private const val DROPDOWN_ID = "option-dropdown"
-private const val ON_BLUR_TIMEOUT_MILLIS = 100
 
 /**
  * Component that encapsulates debounced prefix autocompletion over [UserInfo.name]

diff --git a/.../src/main/kotlin/com/saveourtool/save/frontend/components/mobile/SaveWelcomeMobileView.kt b/.../src/main/kotlin/com/saveourtool/save/frontend/components/mobile/SaveWelcomeMobileView.kt
@@ -4,7 +4,7 @@ package com.saveourtool.save.frontend.components.mobile
 
 import com.saveourtool.save.frontend.components.views.welcome.chevron
 import com.saveourtool.save.frontend.components.views.welcome.pagers.allSaveWelcomePagers
-import com.saveourtool.save.frontend.components.views.welcome.pagers.renderReadMorePage
+import com.saveourtool.save.frontend.components.views.welcome.pagers.save.renderReadMorePage
 import com.saveourtool.save.frontend.components.views.welcome.saveWelcomeMarketingTitle
 import com.saveourtool.save.frontend.externals.animations.animator
 import com.saveourtool.save.frontend.externals.animations.scrollContainer

diff --git a/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/topbar/TopBar.kt b/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/topbar/TopBar.kt
@@ -7,7 +7,7 @@
 package com.saveourtool.save.frontend.components.topbar
 
 import com.saveourtool.save.frontend.externals.fontawesome.*
-import com.saveourtool.save.frontend.utils.not
+import com.saveourtool.save.frontend.utils.notIn
 import com.saveourtool.save.info.UserInfo
 import com.saveourtool.save.validation.FrontendRoutes
 import js.core.jso
@@ -22,6 +22,33 @@ import web.cssom.vw
 import web.html.ButtonType
 import web.html.HTMLButtonElement
 
+/**
+ * A component for web page top bar.
+ *
+ * @return a function component
+ */
+val topBarComponent: FC<TopBarProps> = FC { props ->
+    val location = useLocation()
+    nav {
+        className =
+                ClassName("navbar navbar-expand navbar-dark bg-dark topbar mb-3 static-top shadow mr-1 ml-1 rounded")
+        style = jso {
+            @Suppress("MAGIC_NUMBER")
+            width = 100.vw
+        }
+        id = "navigation-top-bar"
+        topBarUrlSplits {
+            this.location = location
+        }
+        if (location.notIn(listOf(FrontendRoutes.REGISTRATION, FrontendRoutes.INDEX))) {
+            topBarLinks { this.location = location }
+        }
+        topBarUserField {
+            userInfo = props.userInfo
+        }
+    }
+}
+
 /**
  * [Props] of the top bar component
  */
@@ -56,31 +83,3 @@ fun ChildrenBuilder.dropdownEntry(
     +text
     handler(this)
 }
-
-/**
- * A component for web page top bar.
- *
- * @return a function component
- */
-fun topBar() = FC<TopBarProps> { props ->
-    val location = useLocation()
-    if (location.not("/${FrontendRoutes.SAVE.path}") && location.not("/${FrontendRoutes.REGISTRATION.path}")) {
-        nav {
-            className =
-                    ClassName("navbar navbar-expand navbar-dark bg-dark topbar mb-3 static-top shadow mr-1 ml-1 rounded")
-            style = jso {
-                width = 100.vw
-            }
-            id = "navigation-top-bar"
-            topBarUrlSplits {
-                this.location = location
-            }
-            topBarLinks {
-                this.location = location
-            }
-            topBarUserField {
-                userInfo = props.userInfo
-            }
-        }
-    }
-}
diff --git a/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/topbar/TopBarLinks.kt b/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/topbar/TopBarLinks.kt
@@ -2,6 +2,7 @@
 
 package com.saveourtool.save.frontend.components.topbar
 
+import com.saveourtool.save.frontend.utils.isVuln
 import com.saveourtool.save.validation.FrontendRoutes
 
 import js.core.jso
@@ -21,7 +22,57 @@ import web.cssom.rem
  */
 private const val TOP_BAR_PATH_SEGMENTS_HIGHLIGHT = 4
 
-val topBarLinks = topBarLinks()
+@Suppress("MAGIC_NUMBER")
+private val saveTopbarLinks = sequenceOf(
+    TopBarLink(hrefAnchor = FrontendRoutes.DEMO.path, width = 4.rem, text = "Demo"),
+    TopBarLink(hrefAnchor = "${FrontendRoutes.DEMO.path}/cpg", width = 3.rem, text = "CPG"),
+    TopBarLink(hrefAnchor = FrontendRoutes.AWESOME_BENCHMARKS.path, width = 13.rem, text = "Awesome Benchmarks"),
+    TopBarLink(hrefAnchor = FrontendRoutes.SANDBOX.path, width = 10.rem, text = "Try SAVE format"),
+    TopBarLink(hrefAnchor = FrontendRoutes.PROJECTS.path, width = 9.rem, text = "Projects board"),
+    TopBarLink(hrefAnchor = FrontendRoutes.CONTESTS.path, width = 6.rem, text = "Contests"),
+    TopBarLink(hrefAnchor = FrontendRoutes.ABOUT_US.path, width = 6.rem, text = "About us"),
+)
+
+@Suppress("MAGIC_NUMBER")
+private val vulnTopbarLinks = sequenceOf(
+    TopBarLink(hrefAnchor = FrontendRoutes.CREATE_VULNERABILITY.path, width = 13.rem, text = "Propose vulnerability"),
+    TopBarLink(hrefAnchor = FrontendRoutes.VULNERABILITIES.path, width = 8.rem, text = "Vulnerabilities"),
+)
+
+/**
+ * Displays the static links that do not depend on the url.
+ */
+@Suppress("LongMethod", "TOO_LONG_FUNCTION")
+val topBarLinks: FC<TopBarLinksProps> = FC { props ->
+    ul {
+        className = ClassName("navbar-nav mx-auto")
+        if (props.location.isVuln()) {
+            vulnTopbarLinks
+        } else {
+            saveTopbarLinks
+        }
+            .forEach { elem ->
+                li {
+                    className = ClassName("nav-item")
+                    if (elem.isExternalLink) {
+                        a {
+                            className = ClassName("nav-link d-flex align-items-center text-light me-2 active")
+                            style = jso { width = elem.width }
+                            href = elem.hrefAnchor
+                            +elem.text
+                        }
+                    } else {
+                        Link {
+                            className = ClassName("nav-link d-flex align-items-center me-2 ${textColor(elem.hrefAnchor, props.location)} active")
+                            style = jso { width = elem.width }
+                            to = elem.hrefAnchor
+                            +elem.text
+                        }
+                    }
+                }
+            }
+    }
+}
 
 /**
  * [Props] of the top bar links component
@@ -46,45 +97,6 @@ data class TopBarLink(
     val isExternalLink: Boolean = false,
 )
 
-/**
- * Displays the static links that do not depend on the url.
- */
-@Suppress("MAGIC_NUMBER", "LongMethod", "TOO_LONG_FUNCTION")
-private fun topBarLinks() = FC<TopBarLinksProps> { props ->
-    ul {
-        className = ClassName("navbar-nav mx-auto")
-        sequenceOf(
-            TopBarLink(hrefAnchor = FrontendRoutes.VULNERABILITIES.path, width = 8.rem, text = "Vulnerabilities"),
-            TopBarLink(hrefAnchor = FrontendRoutes.DEMO.path, width = 4.rem, text = "Demo"),
-            TopBarLink(hrefAnchor = "${FrontendRoutes.DEMO.path}/cpg", width = 3.rem, text = "CPG"),
-            TopBarLink(hrefAnchor = FrontendRoutes.AWESOME_BENCHMARKS.path, width = 12.rem, text = "Awesome Benchmarks"),
-            TopBarLink(hrefAnchor = FrontendRoutes.SANDBOX.path, width = 10.rem, text = "Try SAVE format"),
-            TopBarLink(hrefAnchor = FrontendRoutes.PROJECTS.path, width = 9.rem, text = "Projects board"),
-            TopBarLink(hrefAnchor = FrontendRoutes.CONTESTS.path, width = 6.rem, text = "Contests"),
-            TopBarLink(hrefAnchor = FrontendRoutes.ABOUT_US.path, width = 6.rem, text = "About us"),
-        ).forEach { elem ->
-            li {
-                className = ClassName("nav-item")
-                if (elem.isExternalLink) {
-                    a {
-                        className = ClassName("nav-link d-flex align-items-center text-light me-2 active")
-                        style = jso { width = elem.width }
-                        href = elem.hrefAnchor
-                        +elem.text
-                    }
-                } else {
-                    Link {
-                        className = ClassName("nav-link d-flex align-items-center me-2 ${textColor(elem.hrefAnchor, props.location)} active")
-                        style = jso { width = elem.width }
-                        to = elem.hrefAnchor
-                        +elem.text
-                    }
-                }
-            }
-        }
-    }
-}
-
 private fun textColor(
     hrefAnchor: String,
     location: Location,

diff --git a/...ontend/src/main/kotlin/com/saveourtool/save/frontend/components/topbar/TopBarUrlSplits.kt b/...ontend/src/main/kotlin/com/saveourtool/save/frontend/components/topbar/TopBarUrlSplits.kt
@@ -18,22 +18,10 @@ import react.router.dom.Link
 import remix.run.router.Location
 import web.cssom.ClassName
 
-val topBarUrlSplits = topBarUrlSplits()
-
-/**
- * [Props] of the top bar url splits component
- */
-external interface TopBarUrlSplitsProps : Props {
-    /**
-     * User location for url analysis.
-     */
-    var location: Location
-}
-
 /**
  * Displays the URL split with "/".
  */
-private fun topBarUrlSplits() = FC<TopBarUrlSplitsProps> { props ->
+val topBarUrlSplits: FC<TopBarUrlSplitsProps> = FC { props ->
     nav {
         className = ClassName("navbar-nav mr-auto w-100")
         ariaLabel = "breadcrumb"
@@ -47,7 +35,7 @@ private fun topBarUrlSplits() = FC<TopBarUrlSplitsProps> { props ->
                     // if we are on welcome page right now - need to highlight SAVE in menu
                     val textColor = if (props.location.pathname == "/") "text-warning" else "text-light"
                     className = ClassName(textColor)
-                    +"SAVE"
+                    +"SaveOurTool!"
                 }
             }
             props.location.pathname
@@ -83,3 +71,13 @@ private fun topBarUrlSplits() = FC<TopBarUrlSplitsProps> { props ->
         }
     }
 }
+
+/**
+ * [Props] of the top bar url splits component
+ */
+external interface TopBarUrlSplitsProps : Props {
+    /**
+     * User location for url analysis.
+     */
+    var location: Location
+}
diff --git a/...ontend/src/main/kotlin/com/saveourtool/save/frontend/components/topbar/TopBarUserField.kt b/...ontend/src/main/kotlin/com/saveourtool/save/frontend/components/topbar/TopBarUserField.kt
@@ -30,23 +30,10 @@ import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.cancel
 import kotlinx.coroutines.isActive
 
-val topBarUserField = topBarUserField()
-
 @Suppress("MAGIC_NUMBER")
-val logoSize: CSSProperties =
-        jso {
-            height = 2.5.rem
-            width = 2.5.rem
-        }
-
-/**
- * [Props] of the top bar user field component
- */
-external interface TopBarUserFieldProps : Props {
-    /**
-     * Currently logged in user or `null`.
-     */
-    var userInfo: UserInfo?
+val logoSize: CSSProperties = jso {
+    height = 2.5.rem
+    width = 2.5.rem
 }
 
 /**
@@ -58,7 +45,7 @@ external interface TopBarUserFieldProps : Props {
     "TOO_LONG_FUNCTION",
     "LOCAL_VARIABLE_EARLY_DECLARATION"
 )
-private fun topBarUserField() = FC<TopBarUserFieldProps> { props ->
+val topBarUserField: FC<TopBarUserFieldProps> = FC { props ->
     val scope = CoroutineScope(Dispatchers.Default)
     val navigate = useNavigate()
     var isLogoutModalOpen by useState(false)
@@ -79,9 +66,7 @@ private fun topBarUserField() = FC<TopBarUserFieldProps> { props ->
         // Nav Item - User Information
         li {
             className = ClassName("nav-item dropdown no-arrow")
-            onClickCapture = {
-                isAriaExpanded = !isAriaExpanded
-            }
+            onClickCapture = { isAriaExpanded = !isAriaExpanded }
             a {
                 href = "#"
                 className = ClassName("nav-link dropdown-toggle")
@@ -171,3 +156,13 @@ private fun topBarUserField() = FC<TopBarUserFieldProps> { props ->
         isOpen = isLogoutModalOpen
     }
 }
+
+/**
+ * [Props] of the top bar user field component
+ */
+external interface TopBarUserFieldProps : Props {
+    /**
+     * Currently logged-in user or `null`.
+     */
+    var userInfo: UserInfo?
+}