Fixed error on vulnerability page (#2834)

- added error message to ErrorBoundary - added missing namespace for translation
saveourtool · Nov 1, 2023 · 075fe77 · 075fe77
1 parent f0e74c5
commit 075fe77
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 29 deletions.
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
@@ -8,20 +8,19 @@ import com.saveourtool.save.frontend.components.topbar.topBarComponent
 import com.saveourtool.save.frontend.components.views.FallbackView
 
 import js.core.jso
-import react.Component
-import react.PropsWithChildren
-import react.RStatics
-import react.ReactNode
-import react.State
-import react.create
+import react.*
 import react.dom.html.ReactHTML.div
-import react.react
 import web.cssom.ClassName
 
 /**
  * State of error boundary component
  */
 external interface ErrorBoundaryState : State {
+    /**
+     * The error message
+     */
+    var errorMessage: String?
+
     /**
      * True is there is an error in the wrapped component tree
      */
@@ -34,21 +33,24 @@ external interface ErrorBoundaryState : State {
 class ErrorBoundary : Component<PropsWithChildren, ErrorBoundaryState>() {
     init {
         state = jso {
+            errorMessage = null
             hasError = false
         }
     }
 
     override fun render(): ReactNode? = if (state.hasError == true) {
-        div.create {
-            className = ClassName("container-fluid")
-            topBarComponent()
-            FallbackView::class.react {
-                bigText = "Error"
-                smallText = "Something went wrong"
+        FC {
+            div {
+                className = ClassName("container-fluid")
+                topBarComponent()
+                FallbackView::class.react {
+                    bigText = "Error"
+                    smallText = "Something went wrong: ${state.errorMessage ?: "Unknown error"}"
+                }
+                @Suppress("EMPTY_BLOCK_STRUCTURE_ERROR")
+                footer { }
             }
-            @Suppress("EMPTY_BLOCK_STRUCTURE_ERROR")
-            footer { }
-        }
+        }.create()
     } else {
         props.children
     }
@@ -59,8 +61,9 @@ class ErrorBoundary : Component<PropsWithChildren, ErrorBoundaryState>() {
              * From [React docs](https://reactjs.org/docs/error-boundaries.html):
              * 'A class component becomes an error boundary if it defines either (or both) of the lifecycle methods static getDerivedStateFromError() or componentDidCatch()'
              */
-            getDerivedStateFromError = {
+            getDerivedStateFromError = { ex ->
                 jso {
+                    errorMessage = ex.message
                     hasError = true
                 }
             }

diff --git a/.../kotlin/com/saveourtool/save/frontend/components/views/vuln/component/UploadCosvButton.kt b/.../kotlin/com/saveourtool/save/frontend/components/views/vuln/component/UploadCosvButton.kt
@@ -5,24 +5,22 @@ package com.saveourtool.save.frontend.components.views.vuln.component
 import com.saveourtool.save.frontend.externals.fontawesome.faFile
 import com.saveourtool.save.frontend.externals.i18next.useTranslation
 import com.saveourtool.save.frontend.utils.buttonBuilder
-import com.saveourtool.save.frontend.utils.withNavigate
 import com.saveourtool.save.validation.FrontendRoutes
 import react.FC
 import react.Props
+import react.router.useNavigate
 
 val uploadCosvButton: FC<UploadCosvButtonProps> = FC { props ->
     val (t) = useTranslation("vulnerability-upload")
+    val navigate = useNavigate()
 
-    withNavigate { navigateContext ->
-
-        if (props.isImage) {
-            buttonBuilder(faFile, style = "primary", title = "Add new vulnerability from json", classes = "icon-2-5rem", isOutline = true) {
-                navigateContext.navigate("/${FrontendRoutes.VULN_UPLOAD}")
-            }
-        } else {
-            buttonBuilder("Upload COSV files".t(), style = "primary", isOutline = true) {
-                navigateContext.navigate("/${FrontendRoutes.VULN_UPLOAD}")
-            }
+    if (props.isImage) {
+        buttonBuilder(faFile, style = "primary", title = "Add new vulnerability from json", classes = "icon-2-5rem", isOutline = true) {
+            navigate("/${FrontendRoutes.VULN_UPLOAD}")
+        }
+    } else {
+        buttonBuilder("Upload COSV files".t(), style = "primary", isOutline = true) {
+            navigate("/${FrontendRoutes.VULN_UPLOAD}")
         }
     }
 }

diff --git a/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/externals/i18next/InitI18n.kt b/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/externals/i18next/InitI18n.kt
@@ -32,10 +32,12 @@ fun initI18n(isDebug: Boolean = false, interpolationEscapeValue: Boolean = false
                     'table-headers',
                     'thanks-for-registration',
                     'vulnerability-collection',
+                    'vulnerability-upload',
                     'welcome',
                     'vulnerability',
                     'comments',
-                    'dates'
+                    'dates',
+                    'index'
                 ],
                 backend: {
                     loadPath: '/locales/{{lng}}/{{ns}}.json'