VulnerabilityView localization (#2594)

* VulnerabilityView localization ### What's done: * Added localization for VulnerabilityView --------- Co-authored-by: Kirill Gevorkyan <[email protected]>
saveourtool · Sep 15, 2023 · ca39e60 · ca39e60
1 parent 4d028aa
commit ca39e60
Show file tree

Hide file tree

Showing 18 changed files with 303 additions and 129 deletions.
diff --git a/...rc/main/kotlin/com/saveourtool/save/backend/service/vulnerability/VulnerabilityService.kt b/...rc/main/kotlin/com/saveourtool/save/backend/service/vulnerability/VulnerabilityService.kt
@@ -186,20 +186,19 @@ class VulnerabilityService(
      * @param name name of vulnerability
      * @return vulnerability dto by name with description
      */
-    fun getVulnerabilityWithDescriptionByIdentifier(name: String): Mono<VulnerabilityDto> =
-            cosvRepository.findLatestRawExt(name)
-                .blockingMap { rawCosvExt ->
-                    rawCosvExt to lnkCosvMetadataTagRepository.findAllByVulnerabilityMetadataIdentifier(rawCosvExt.metadata.identifier)
-                }
-                .map { (rawCostExt, tags) ->
-                    rawCostExt.toVulnerabilityDtoWithDescription()
-                        .copy(
-                            dates = rawCostExt.cosv.getTimeline(),
-                            participants = rawCostExt.saveContributors,
-                            userInfo = rawCostExt.metadata.user,
-                            tags = tags.map { it.tag.name }.toSet(),
-                        )
-                }
+    fun getVulnerabilityWithDescriptionByIdentifier(name: String): Mono<VulnerabilityDto> = cosvRepository.findLatestRawExt(name)
+        .blockingMap { rawCosvExt ->
+            rawCosvExt to lnkCosvMetadataTagRepository.findAllByVulnerabilityMetadataIdentifier(rawCosvExt.metadata.identifier)
+        }
+        .map { (rawCostExt, tags) ->
+            rawCostExt.toVulnerabilityDtoWithDescription()
+                .copy(
+                    dates = rawCostExt.cosv.getTimeline(),
+                    participants = rawCostExt.saveContributors,
+                    userInfo = rawCostExt.metadata.user,
+                    tags = tags.map { it.tag.name }.toSet(),
+                )
+        }
 
     /**
      * @param vulnerabilityDto dto of new vulnerability

diff --git a/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/basic/Forum.kt b/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/basic/Forum.kt
@@ -6,6 +6,8 @@ import com.saveourtool.save.entities.CommentDto
 import com.saveourtool.save.frontend.components.inputform.InputTypes
 import com.saveourtool.save.frontend.externals.fontawesome.faPaperPlane
 import com.saveourtool.save.frontend.externals.fontawesome.faTimes
+import com.saveourtool.save.frontend.externals.i18next.TranslationFunction
+import com.saveourtool.save.frontend.externals.i18next.useTranslation
 import com.saveourtool.save.frontend.utils.*
 import com.saveourtool.save.frontend.utils.AVATAR_PLACEHOLDER
 import com.saveourtool.save.info.UserInfo
@@ -35,12 +37,10 @@ import kotlinx.serialization.json.Json
 /**
  * @return a function component
  */
-@Suppress(
-    "GENERIC_VARIABLE_WRONG_DECLARATION",
-    "MAGIC_NUMBER",
-)
+@Suppress("MAGIC_NUMBER")
 val newCommentWindow: FC<NewCommentWindowProps> = FC { props ->
     val (comment, setComment) = useState(CommentDto.empty)
+    val (t) = useTranslation("comments")
 
     val enrollRequest = useDeferredRequest {
         val commentNew = comment.copy(section = window.location.pathname)
@@ -65,7 +65,8 @@ val newCommentWindow: FC<NewCommentWindowProps> = FC { props ->
                 props.currentUserInfo.avatar,
                 props.currentUserInfo.name,
                 props.currentUserInfo.rating,
-                "#f7f5fb"
+                t,
+                "#f7f5fb",
             )
             div {
                 className = ClassName("col")
@@ -81,7 +82,7 @@ val newCommentWindow: FC<NewCommentWindowProps> = FC { props ->
                     rows = 5
                     id = InputTypes.COMMENT.name
                     required = true
-                    placeholder = "Write a comment"
+                    placeholder = "Write a comment".t()
                 }
             }
         }
@@ -103,14 +104,16 @@ val newCommentWindow: FC<NewCommentWindowProps> = FC { props ->
 /**
  * [FC] for comment displaying
  */
-@Suppress("GENERIC_VARIABLE_WRONG_DECLARATION", "MAGIC_NUMBER")
+@Suppress("MAGIC_NUMBER")
 val commentWindow: FC<CommentWindowProps> = FC { props ->
+    val (t) = useTranslation("comments")
     div {
         className = ClassName("shadow input-group row no-gutters mx-auto border-secondary")
         renderLeftColumn(
             props.comment.userAvatar,
             props.comment.userName,
             props.comment.userRating,
+            t,
         )
         div {
             className = ClassName("shadow-none card col-10 text-left border-0")
@@ -120,12 +123,12 @@ val commentWindow: FC<CommentWindowProps> = FC { props ->
                 style = jso { background = "#f1f1f1".unsafeCast<Background>() }
                 span {
                     className = ClassName("ml-1")
-                    +(comment.createDate?.toUnixCalendarFormat(TimeZone.currentSystemDefault()) ?: "Unknown")
+                    +(comment.createDate?.toUnixCalendarFormat(TimeZone.currentSystemDefault()) ?: "Unknown".t())
                 }
                 div {
                     if (props.currentUserInfo?.canDelete(props.comment) == true) {
                         buttonBuilder(faTimes, style = "", classes = "btn-sm") {
-                            if (window.confirm("Are you sure you want to delete a comment?")) {
+                            if (window.confirm("Are you sure you want to delete a comment?".t())) {
                                 props.setCommentForDeletion(props.comment)
                             }
                         }
@@ -177,11 +180,12 @@ external interface NewCommentWindowProps : PropsWithChildren {
 
 private fun UserInfo.canDelete(commentDto: CommentDto) = isSuperAdmin() || name == commentDto.userName
 
-@Suppress("MAGIC_NUMBER")
+@Suppress("MAGIC_NUMBER", "IDENTIFIER_LENGTH")
 private fun ChildrenBuilder.renderLeftColumn(
     userAvatar: String?,
     name: String,
     rating: Long,
+    t: TranslationFunction,
     color: String = "#f1f1f1",
 ) {
     val (avatar, setAvatar) = useState(userAvatar?.avatarRenderer() ?: AVATAR_PROFILE_PLACEHOLDER)
@@ -217,7 +221,7 @@ private fun ChildrenBuilder.renderLeftColumn(
                         }
                         div {
                             className = ClassName("col-12 text-center text-xs font-weight-bold text-info text-uppercase")
-                            +"Rating"
+                            +"Rating".t()
                         }
                         div {
                             className = ClassName("col-12 text-center text-xs")

diff --git a/...ntend/src/main/kotlin/com/saveourtool/save/frontend/components/basic/TimelineComponent.kt b/...ntend/src/main/kotlin/com/saveourtool/save/frontend/components/basic/TimelineComponent.kt
@@ -5,6 +5,7 @@ package com.saveourtool.save.frontend.components.basic
 import com.saveourtool.save.entities.vulnerability.VulnerabilityDateType
 import com.saveourtool.save.entities.vulnerability.VulnerabilityDateType.Companion.isSystemDateType
 import com.saveourtool.save.entities.vulnerability.VulnerabilityDto
+import com.saveourtool.save.frontend.externals.i18next.useTranslation
 import com.saveourtool.save.frontend.utils.buttonBuilder
 import react.*
 import react.dom.html.ReactHTML.div
@@ -15,6 +16,7 @@ import kotlinx.datetime.LocalDateTime
 const val HOVERABLE_CONST = "hoverable"
 
 val timelineComponent: FC<TimelineComponentProps> = FC { props ->
+    val (t) = useTranslation("dates")
     val hoverable = props.onNodeClick?.let { HOVERABLE_CONST }.orEmpty()
 
     div {
@@ -28,7 +30,7 @@ val timelineComponent: FC<TimelineComponentProps> = FC { props ->
 
         props.onAddClick?.let { onClickCallback ->
             buttonBuilder(
-                label = "Add date",
+                label = "Add date".t(),
                 style = "secondary",
                 isOutline = true,
                 classes = "btn btn-sm btn-primary"
@@ -62,7 +64,7 @@ val timelineComponent: FC<TimelineComponentProps> = FC { props ->
                             }
                             div {
                                 className = ClassName("text-label")
-                                +label
+                                +label.t()
                             }
                             div {
                                 className = ClassName("date-label")

diff --git a/...src/main/kotlin/com/saveourtool/save/frontend/components/views/vuln/VulnerabilityBadge.kt b/...src/main/kotlin/com/saveourtool/save/frontend/components/views/vuln/VulnerabilityBadge.kt
@@ -3,6 +3,7 @@
 package com.saveourtool.save.frontend.components.views.vuln
 
 import com.saveourtool.save.entities.vulnerability.VulnerabilityDto
+import com.saveourtool.save.frontend.externals.i18next.useTranslation
 import com.saveourtool.save.frontend.externals.progressbar.progressBar
 import com.saveourtool.save.frontend.themes.Colors
 import js.core.jso
@@ -20,6 +21,7 @@ private const val FOR_ORANGE = 8.9f
 private const val MAX_VALUE = 10.0f
 
 val vulnerabilityBadge: FC<VulnerabilityBadgeProps> = FC { props ->
+    val (t) = useTranslation("vulnerability")
     val (color, criticalityLabel) = when (props.vulnerability.progress) {
         in 0f..FOR_GREEN -> Colors.SUCCESS.value to "Low"
         in FOR_GREEN..FOR_YELLOW -> Colors.WARNING.value to "Medium"
@@ -50,7 +52,7 @@ val vulnerabilityBadge: FC<VulnerabilityBadgeProps> = FC { props ->
                         className = ClassName("row align-items-center mb-2")
                         h4 {
                             className = ClassName("text-gray-900 mb-2")
-                            +"Criticality Scoring"
+                            +"Criticality Scoring".t()
                         }
                     }
                     div {
@@ -90,9 +92,4 @@ external interface VulnerabilityBadgeProps : Props {
      * [VulnerabilityDto] to display
      */
     var vulnerability: VulnerabilityDto
-
-    /**
-     * horizontal alignment
-     */
-    var horizontalAlignment: String
 }
diff --git a/...ain/kotlin/com/saveourtool/save/frontend/components/views/vuln/VulnerabilityCommentTab.kt b/...ain/kotlin/com/saveourtool/save/frontend/components/views/vuln/VulnerabilityCommentTab.kt
@@ -6,6 +6,7 @@ import com.saveourtool.save.entities.CommentDto
 import com.saveourtool.save.entities.vulnerability.VulnerabilityDto
 import com.saveourtool.save.frontend.components.basic.commentWindow
 import com.saveourtool.save.frontend.components.basic.newCommentWindow
+import com.saveourtool.save.frontend.externals.i18next.useTranslation
 import com.saveourtool.save.frontend.utils.*
 import com.saveourtool.save.info.UserInfo
 
@@ -25,6 +26,7 @@ import kotlinx.serialization.json.Json
 private const val DEFAULT_MAX_COMMENT_AMOUNT = 5
 
 val vulnerabilityCommentTab: FC<VulnerabilityCommentTabProps> = FC { props ->
+    val (t) = useTranslation("comments")
     val (comments, setComments) = useState(emptyList<CommentDto>())
     val (isAllCommentsShown, setIsAllCommentsShown) = useState(false)
 
@@ -114,7 +116,7 @@ val vulnerabilityCommentTab: FC<VulnerabilityCommentTabProps> = FC { props ->
         className = ClassName("col-12 mt-3")
         h4 {
             className = ClassName("text-center card p-2 shadow")
-            +"Authorize in order to write comments"
+            +"Authorize in order to write comments".t()
         }
     }
 }

diff --git a/...main/kotlin/com/saveourtool/save/frontend/components/views/vuln/VulnerabilityDateModal.kt b/...main/kotlin/com/saveourtool/save/frontend/components/views/vuln/VulnerabilityDateModal.kt
@@ -8,6 +8,7 @@ import com.saveourtool.save.entities.vulnerability.VulnerabilityDateType.Compani
 import com.saveourtool.save.frontend.components.inputform.*
 import com.saveourtool.save.frontend.components.inputform.inputTextDisabled
 import com.saveourtool.save.frontend.components.modal.modal
+import com.saveourtool.save.frontend.externals.i18next.useTranslation
 import com.saveourtool.save.frontend.utils.*
 
 import react.FC
@@ -25,6 +26,7 @@ import kotlinx.serialization.json.Json
  * Component that allows to add new project in vulnerability
  */
 val vulnerabilityDateModal: FC<VulnerabilityDateModalProps> = FC { props ->
+    val (t) = useTranslation(arrayOf("vulnerability", "dates"))
     val (vulnerabilityDate, setVulnerabilityDate) = useState(VulnerabilityDateDto.empty)
     val (conflictMessage, setConflictMessage) = useState<String?>(null)
     val addDate = useDeferredRequest {
@@ -50,7 +52,7 @@ val vulnerabilityDateModal: FC<VulnerabilityDateModalProps> = FC { props ->
         inputTextDisabled(
             InputTypes.CVE_NAME,
             "mt-3",
-            "Vulnerability identifier",
+            "Vulnerability identifier".t(),
             props.identifier,
             true,
         )
@@ -59,22 +61,22 @@ val vulnerabilityDateModal: FC<VulnerabilityDateModalProps> = FC { props ->
             className = ClassName("mt-3")
             label {
                 className = ClassName("form-label")
-                +"Date type"
+                +"Date type".t()
                 span {
                     className = ClassName("text-danger text-left")
                     +"*"
                 }
             }
 
             selectorBuilder(
-                vulnerabilityDate.type.value,
-                VulnerabilityDateType.values().map { it.value }.filterNot { it.isSystemDateType() },
+                "dates:${vulnerabilityDate.type.value}".t(),
+                VulnerabilityDateType.values().map { "dates:${it.value}".t() }.filterNot { it.isSystemDateType() },
                 classes = "form-control custom-select",
             ) { event ->
                 setVulnerabilityDate { date ->
                     val type = requireNotNull(
                         event.target.value.let { typeName ->
-                            VulnerabilityDateType.values().find { it.value == typeName }
+                            VulnerabilityDateType.values().find { "dates:${it.value}".t() == "dates:$typeName".t() }
                         }
                     )
                     date.copy(type = type)
@@ -87,7 +89,7 @@ val vulnerabilityDateModal: FC<VulnerabilityDateModalProps> = FC { props ->
             InputTypes.CVE_DATE,
             true,
             "mt-3",
-            "Date",
+            "Date".t(),
         ) { event ->
             setVulnerabilityDate { date ->
                 date.copy(date = event.target.value.dateStringToLocalDateTime())

diff --git a/...in/kotlin/com/saveourtool/save/frontend/components/views/vuln/VulnerabilityGeneralInfo.kt b/...in/kotlin/com/saveourtool/save/frontend/components/views/vuln/VulnerabilityGeneralInfo.kt
@@ -6,6 +6,7 @@ import com.saveourtool.save.frontend.components.basic.renderAvatar
 import com.saveourtool.save.frontend.components.basic.renderUserAvatarWithName
 import com.saveourtool.save.frontend.components.basic.userBoard
 import com.saveourtool.save.frontend.externals.fontawesome.*
+import com.saveourtool.save.frontend.externals.i18next.useTranslation
 import com.saveourtool.save.frontend.utils.*
 import com.saveourtool.save.info.UserInfo
 import com.saveourtool.save.utils.toUnixCalendarFormat
@@ -32,6 +33,7 @@ import kotlinx.serialization.json.Json
  */
 @Suppress("EMPTY_BLOCK_STRUCTURE_ERROR", "MAGIC_NUMBER")
 val vulnerabilityGeneralInfo: FC<VulnerabilityGeneralInfo> = FC { props ->
+    val (t) = useTranslation("vulnerability")
     val enrollRequest = useDeferredRequest {
         post(
             "$apiUrl/vulnerabilities/update",
@@ -67,8 +69,8 @@ val vulnerabilityGeneralInfo: FC<VulnerabilityGeneralInfo> = FC { props ->
                                         style = jso {
                                             textDecoration = underline
                                         }
-                                        +"Edit "
-                                        fontAwesomeIcon(icon = faEdit)
+                                        +"Edit".t()
+                                        fontAwesomeIcon(icon = faEdit, "ml-1")
                                     }
                                 },
                                 isOutline = true, classes = "text-xs text-left ml-auto"
@@ -111,7 +113,7 @@ val vulnerabilityGeneralInfo: FC<VulnerabilityGeneralInfo> = FC { props ->
                     className = ClassName("d-flex justify-content-between align-items-center")
                     label {
                         className = ClassName("m-0")
-                        +"Last update time:"
+                        +"${"Last update time".t()}:"
                     }
                     label {
                         className = ClassName("m-0")
@@ -121,7 +123,7 @@ val vulnerabilityGeneralInfo: FC<VulnerabilityGeneralInfo> = FC { props ->
                 hr { }
                 h6 {
                     className = ClassName("font-weight-bold text-primary-blue mb-4")
-                    +"Description"
+                    +"Description".t()
                 }
                 textarea {
                     className = ClassName("auto_height form-control-plaintext px-2 pt-0 pb-0 text-gray-900")
@@ -143,7 +145,7 @@ val vulnerabilityGeneralInfo: FC<VulnerabilityGeneralInfo> = FC { props ->
                     hr { }
                     h6 {
                         className = ClassName("font-weight-bold text-primary-blue mb-4")
-                        +"Tags"
+                        +"Tags".t()
                     }
                     div {
                         vulnerabilityTagsComponent {
@@ -160,7 +162,7 @@ val vulnerabilityGeneralInfo: FC<VulnerabilityGeneralInfo> = FC { props ->
                     hr { }
                     h6 {
                         className = ClassName("font-weight-bold text-primary-blue mb-4")
-                        +"Related link"
+                        +"Related link".t()
                     }
                     Link {
                         to = relatedLink.toString()
@@ -171,7 +173,7 @@ val vulnerabilityGeneralInfo: FC<VulnerabilityGeneralInfo> = FC { props ->
                     hr { }
                     h6 {
                         className = ClassName("font-weight-bold text-primary-blue mb-3")
-                        +"Author"
+                        +"Author".t()
                     }
                     renderUserAvatarWithName(this@run, isHorizontal = true, classes = "mr-2") {
                         height = 4.rem
@@ -183,7 +185,7 @@ val vulnerabilityGeneralInfo: FC<VulnerabilityGeneralInfo> = FC { props ->
                     hr { }
                     h6 {
                         className = ClassName("font-weight-bold text-primary-blue mb-3")
-                        +"Organization"
+                        +"Organization".t()
                     }
                     Link {
                         renderAvatar(this@run) {
@@ -198,7 +200,7 @@ val vulnerabilityGeneralInfo: FC<VulnerabilityGeneralInfo> = FC { props ->
                     hr { }
                     h6 {
                         className = ClassName("font-weight-bold text-primary-blue mb-4")
-                        +"Collaborators"
+                        +"Collaborators".t()
                     }
                     userBoard {
                         users = participants