Fixed text displaying in tables on user and organization pages (#2860)

DrAlexD · web-flow · commit d48efe72d1cb · 2023-11-16T10:39:45.000+03:00
### What's done:
- vulnerabilities and users tabs are now only displayed if there are new users to approve.
- added text centering in tables on user, organization and project pages.
- added colors for `Status` field depending on its value in the vulnerability table.
- added colors for `Criticality` field depending on its value in the vulnerability table.
diff --git a/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/basic/organizations/OrganizationContestsMenu.kt b/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/basic/organizations/OrganizationContestsMenu.kt
@@ -40,6 +40,7 @@ private val contestsTable: FC<OrganizationContestsTableProps<ContestDto>> = tabl
             column(id = "name", header = "Contest Name", { name }) { cellContext ->
                 Fragment.create {
                     td {
+                        className = ClassName("align-middle text-center")
                         Link {
                             to = "/contests/${cellContext.row.original.name}"
                             +cellContext.value
@@ -50,27 +51,31 @@ private val contestsTable: FC<OrganizationContestsTableProps<ContestDto>> = tabl
             column(id = "description", header = "Description", { description }) { cellContext ->
                 Fragment.create {
                     td {
+                        className = ClassName("align-middle text-center")
                         +(cellContext.value ?: "Description is not provided")
                     }
                 }
             }
             column(id = "start_time", header = "Start Time", { startTime.toString() }) { cellContext ->
                 Fragment.create {
                     td {
+                        className = ClassName("align-middle text-center")
                         +cellContext.value.replace("T", " ")
                     }
                 }
             }
             column(id = "end_time", header = "End Time", { endTime.toString() }) { cellContext ->
                 Fragment.create {
                     td {
+                        className = ClassName("align-middle text-center")
                         +cellContext.value.replace("T", " ")
                     }
                 }
             }
             column("checkBox", "") { cellContext ->
                 Fragment.create {
                     td {
+                        className = ClassName("align-middle text-center")
                         input {
                             className = ClassName("mx-auto")
                             type = InputType.checkbox
@@ -89,8 +94,6 @@ private val contestsTable: FC<OrganizationContestsTableProps<ContestDto>> = tabl
             }
         }
     },
-    initialPageSize = 10,
-    useServerPaging = false
 ) {
     arrayOf(it.isContestCreated)
 }
diff --git a/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/basic/organizations/OrganizationToolsMenu.kt b/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/basic/organizations/OrganizationToolsMenu.kt
@@ -99,6 +99,7 @@ private fun organizationToolsMenu() = FC<OrganizationToolsMenuProps> { props ->
                     Fragment.create {
                         val projectDto = cellContext.row.original
                         td {
+                            className = ClassName("align-middle text-center")
                             when (projectDto.status) {
                                 ProjectStatus.CREATED -> div {
                                     Link {
@@ -124,13 +125,15 @@ private fun organizationToolsMenu() = FC<OrganizationToolsMenuProps> { props ->
                 column(id = "description", header = "Description") {
                     Fragment.create {
                         td {
+                            className = ClassName("align-middle text-center")
                             +it.value.description
                         }
                     }
                 }
                 column(id = "rating", header = "Contest Rating") {
                     Fragment.create {
                         td {
+                            className = ClassName("align-middle text-center")
                             +"0"
                         }
                     }
@@ -143,6 +146,7 @@ private fun organizationToolsMenu() = FC<OrganizationToolsMenuProps> { props ->
                     column(id = DELETE_BUTTON_COLUMN_ID, header = EMPTY_COLUMN_HEADER) { cellProps ->
                         Fragment.create {
                             td {
+                                className = ClassName("align-middle text-center")
                                 val project = cellProps.row.original
                                 val projectName = project.name
 
@@ -260,7 +264,6 @@ private fun organizationToolsMenu() = FC<OrganizationToolsMenuProps> { props ->
                 }
             }
         },
-        useServerPaging = false
     ) { tableProps ->
         /*-
          * Necessary for the table to get re-rendered once a project gets
diff --git a/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/basic/projects/ProjectStatisticMenu.kt b/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/basic/projects/ProjectStatisticMenu.kt
@@ -30,28 +30,29 @@ private val executionDetailsTable: FC<TableProps<TestSuiteExecutionStatisticDto>
             column(id = "name", header = "Test suite", { testSuiteName }) {
                 Fragment.create {
                     td {
+                        className = ClassName("align-middle text-center")
                         +it.value
                     }
                 }
             }
             column(id = "tests", header = "Number of tests", { countTest }) {
                 Fragment.create {
                     td {
+                        className = ClassName("align-middle text-center")
                         +"${it.value}"
                     }
                 }
             }
             column(id = "rate", header = "Passed tests", { countWithStatusTest }) {
                 Fragment.create {
                     td {
+                        className = ClassName("align-middle text-center")
                         +"${it.value}"
                     }
                 }
             }
         }
     },
-    initialPageSize = 10,
-    useServerPaging = false,
 )
 
 /**
diff --git a/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/basic/table/filters/VulnerabilitiesFiltersRow.kt b/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/basic/table/filters/VulnerabilitiesFiltersRow.kt
@@ -88,8 +88,8 @@ val vulnerabilitiesFiltersRow: FC<VulnerabilitiesFiltersProps> = FC { props ->
                                         border = "none".unsafeCast<Border>()
                                         boxShadow = "none".unsafeCast<BoxShadow>()
                                     }
-                                    barLeftColor = "red"
-                                    barRightColor = "green"
+                                    barLeftColor = "green"
+                                    barRightColor = "red"
                                     barInnerColor = Colors.WHITE.value
                                     thumbLeftColor = Colors.VULN_PRIMARY.value
                                     thumbRightColor = Colors.VULN_PRIMARY.value
diff --git a/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/views/userprofile/UserProfileNewUsersTab.kt b/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/views/userprofile/UserProfileNewUsersTab.kt
@@ -29,7 +29,7 @@ val renderNewUsersTableForProfileView: FC<Props> = FC {
                     Fragment.create {
                         td {
                             className = ClassName("align-middle")
-                            renderUserAvatarWithName(cellContext.row.original, isHorizontal = true, classes = "mr-2") {
+                            renderUserAvatarWithName(cellContext.row.original) {
                                 height = 3.rem
                                 width = 3.rem
                             }
@@ -39,23 +39,21 @@ val renderNewUsersTableForProfileView: FC<Props> = FC {
                 column(id = "originalName", header = "Original login") { cellContext ->
                     Fragment.create {
                         td {
-                            className = ClassName("align-middle")
+                            className = ClassName("align-middle text-center")
                             +cellContext.value.originalLogins.firstNotNullOfOrNull { it.value }
                         }
                     }
                 }
                 column(id = "source", header = "Source") { cellContext ->
                     Fragment.create {
                         td {
-                            className = ClassName("align-middle")
+                            className = ClassName("align-middle text-center")
                             +cellContext.value.originalLogins.firstNotNullOfOrNull { it.key }
                         }
                     }
                 }
             }
         },
-        initialPageSize = 10,
-        useServerPaging = false,
         isTransparentGrid = true,
     )
 
diff --git a/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/views/userprofile/UserProfileView.kt b/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/views/userprofile/UserProfileView.kt
@@ -94,17 +94,16 @@ val userProfileView: FC<UserProfileViewProps> = FC { props ->
         div {
             className = ClassName("col-7 mb-4 mt-2")
             props.currentUserInfo?.globalRole?.let { role ->
-                @Suppress("MISSING_KDOC_ON_FUNCTION")
-                fun UserProfileTab.toTabName() = if (this == UserProfileTab.USERS) "${this.name} ($countUsers)" else this.name
+                if (role.isSuperAdmin() && props.currentUserInfo?.name == user?.name && countUsers > 0) {
+                    @Suppress("MISSING_KDOC_ON_FUNCTION")
+                    fun UserProfileTab.toTabName() = if (this == UserProfileTab.USERS) "${this.name} ($countUsers)" else this.name
 
-                val tabList = if (role.isSuperAdmin() && props.currentUserInfo?.name == user?.name) {
-                    UserProfileTab.entries.map { it.toTabName() }
-                } else {
-                    UserProfileTab.entries.filter { it != UserProfileTab.USERS }.map { it.name }
-                }
-                tab(selectedMenu.toTabName(), tabList, "nav nav-tabs mt-3") { value ->
-                    val newValue = if (value.contains(UserProfileTab.USERS.name)) UserProfileTab.USERS.name else value
-                    setSelectedMenu { UserProfileTab.valueOf(newValue) }
+                    val tabList = UserProfileTab.entries.map { it.toTabName() }
+
+                    tab(selectedMenu.toTabName(), tabList, "nav nav-tabs mt-3") { value ->
+                        val newValue = if (value.contains(UserProfileTab.USERS.name)) UserProfileTab.USERS.name else value
+                        setSelectedMenu { UserProfileTab.valueOf(newValue) }
+                    }
                 }
             }
 
diff --git a/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/views/vuln/VulnerabilityTableComponent.kt b/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/views/vuln/VulnerabilityTableComponent.kt
@@ -138,8 +138,15 @@ val vulnerabilityTableComponent: FC<VulnerabilityTableComponentProps> = FC { pro
                     column(id = "severityNum", header = "Criticality".t(), { severityNum }) { cellContext ->
                         Fragment.create {
                             td {
-                                className = ClassName("align-middle text-center")
-                                +"${cellContext.row.original.severityNum}"
+                                val severityNum = cellContext.row.original.severityNum
+                                val severityNumColor = when (severityNum) {
+                                    in 0.0f..4.9f -> "text-success"
+                                    in 5.0f..7.5f -> "text-warning"
+                                    in 7.6f..10.0f -> "text-danger"
+                                    else -> ""
+                                }
+                                className = ClassName("align-middle $severityNumColor text-center")
+                                +(severityNum.toString())
                             }
                         }
                     }
@@ -185,8 +192,15 @@ val vulnerabilityTableComponent: FC<VulnerabilityTableComponentProps> = FC { pro
                         column(id = "status", header = "Status".t(), { status }) { cellContext ->
                             Fragment.create {
                                 td {
-                                    className = ClassName("align-middle text-center text-nowrap")
-                                    +cellContext.row.original.status.value
+                                    val status = cellContext.row.original.status.value
+                                    val statusColor = when (status) {
+                                        "Approved" -> "text-success"
+                                        "Created", "Pending review" -> "text-warning"
+                                        "Rejected" -> "text-danger"
+                                        else -> ""
+                                    }
+                                    className = ClassName("align-middle $statusColor text-center text-nowrap")
+                                    +status
                                 }
                             }
                         }

Original file line number	Diff line number	Diff line change
`@@ -40,6 +40,7 @@ private val contestsTable: FC<OrganizationContestsTableProps<ContestDto>> = tabl`
`40`	`40`	`column(id = "name", header = "Contest Name", { name }) { cellContext ->`
`41`	`41`	`Fragment.create {`
`42`	`42`	`td {`
	`43`	`+ className = ClassName("align-middle text-center")`
`43`	`44`	`Link {`
`44`	`45`	`to = "/contests/${cellContext.row.original.name}"`
`45`	`46`	`+cellContext.value`
`@@ -50,27 +51,31 @@ private val contestsTable: FC<OrganizationContestsTableProps<ContestDto>> = tabl`
`50`	`51`	`column(id = "description", header = "Description", { description }) { cellContext ->`
`51`	`52`	`Fragment.create {`
`52`	`53`	`td {`
	`54`	`+ className = ClassName("align-middle text-center")`
`53`	`55`	`+(cellContext.value ?: "Description is not provided")`
`54`	`56`	`}`
`55`	`57`	`}`
`56`	`58`	`}`
`57`	`59`	`column(id = "start_time", header = "Start Time", { startTime.toString() }) { cellContext ->`
`58`	`60`	`Fragment.create {`
`59`	`61`	`td {`
	`62`	`+ className = ClassName("align-middle text-center")`
`60`	`63`	`+cellContext.value.replace("T", " ")`
`61`	`64`	`}`
`62`	`65`	`}`
`63`	`66`	`}`
`64`	`67`	`column(id = "end_time", header = "End Time", { endTime.toString() }) { cellContext ->`
`65`	`68`	`Fragment.create {`
`66`	`69`	`td {`
	`70`	`+ className = ClassName("align-middle text-center")`
`67`	`71`	`+cellContext.value.replace("T", " ")`
`68`	`72`	`}`
`69`	`73`	`}`
`70`	`74`	`}`
`71`	`75`	`column("checkBox", "") { cellContext ->`
`72`	`76`	`Fragment.create {`
`73`	`77`	`td {`
	`78`	`+ className = ClassName("align-middle text-center")`
`74`	`79`	`input {`
`75`	`80`	`className = ClassName("mx-auto")`
`76`	`81`	`type = InputType.checkbox`
`@@ -89,8 +94,6 @@ private val contestsTable: FC<OrganizationContestsTableProps<ContestDto>> = tabl`
`89`	`94`	`}`
`90`	`95`	`}`
`91`	`96`	`},`
`92`		`- initialPageSize = 10,`
`93`		`- useServerPaging = false`
`94`	`97`	`) {`
`95`	`98`	`arrayOf(it.isContestCreated)`
`96`	`99`	`}`
Original file line number	Diff line number	Diff line change
`@@ -99,6 +99,7 @@ private fun organizationToolsMenu() = FC<OrganizationToolsMenuProps> { props ->`
`99`	`99`	`Fragment.create {`
`100`	`100`	`val projectDto = cellContext.row.original`
`101`	`101`	`td {`
	`102`	`+ className = ClassName("align-middle text-center")`
`102`	`103`	`when (projectDto.status) {`
`103`	`104`	`ProjectStatus.CREATED -> div {`
`104`	`105`	`Link {`
`@@ -124,13 +125,15 @@ private fun organizationToolsMenu() = FC<OrganizationToolsMenuProps> { props ->`
`124`	`125`	`column(id = "description", header = "Description") {`
`125`	`126`	`Fragment.create {`
`126`	`127`	`td {`
	`128`	`+ className = ClassName("align-middle text-center")`
`127`	`129`	`+it.value.description`
`128`	`130`	`}`
`129`	`131`	`}`
`130`	`132`	`}`
`131`	`133`	`column(id = "rating", header = "Contest Rating") {`
`132`	`134`	`Fragment.create {`
`133`	`135`	`td {`
	`136`	`+ className = ClassName("align-middle text-center")`
`134`	`137`	`+"0"`
`135`	`138`	`}`
`136`	`139`	`}`
`@@ -143,6 +146,7 @@ private fun organizationToolsMenu() = FC<OrganizationToolsMenuProps> { props ->`
`143`	`146`	`column(id = DELETE_BUTTON_COLUMN_ID, header = EMPTY_COLUMN_HEADER) { cellProps ->`
`144`	`147`	`Fragment.create {`
`145`	`148`	`td {`
	`149`	`+ className = ClassName("align-middle text-center")`
`146`	`150`	`val project = cellProps.row.original`
`147`	`151`	`val projectName = project.name`
`148`	`152`
`@@ -260,7 +264,6 @@ private fun organizationToolsMenu() = FC<OrganizationToolsMenuProps> { props ->`
`260`	`264`	`}`
`261`	`265`	`}`
`262`	`266`	`},`
`263`		`- useServerPaging = false`
`264`	`267`	`) { tableProps ->`
`265`	`268`	`/*-`
`266`	`269`	`* Necessary for the table to get re-rendered once a project gets`
Original file line number	Diff line number	Diff line change
`@@ -30,28 +30,29 @@ private val executionDetailsTable: FC<TableProps<TestSuiteExecutionStatisticDto>`
`30`	`30`	`column(id = "name", header = "Test suite", { testSuiteName }) {`
`31`	`31`	`Fragment.create {`
`32`	`32`	`td {`
	`33`	`+ className = ClassName("align-middle text-center")`
`33`	`34`	`+it.value`
`34`	`35`	`}`
`35`	`36`	`}`
`36`	`37`	`}`
`37`	`38`	`column(id = "tests", header = "Number of tests", { countTest }) {`
`38`	`39`	`Fragment.create {`
`39`	`40`	`td {`
	`41`	`+ className = ClassName("align-middle text-center")`
`40`	`42`	`+"${it.value}"`
`41`	`43`	`}`
`42`	`44`	`}`
`43`	`45`	`}`
`44`	`46`	`column(id = "rate", header = "Passed tests", { countWithStatusTest }) {`
`45`	`47`	`Fragment.create {`
`46`	`48`	`td {`
	`49`	`+ className = ClassName("align-middle text-center")`
`47`	`50`	`+"${it.value}"`
`48`	`51`	`}`
`49`	`52`	`}`
`50`	`53`	`}`
`51`	`54`	`}`
`52`	`55`	`},`
`53`		`- initialPageSize = 10,`
`54`		`- useServerPaging = false,`
`55`	`56`	`)`
`56`	`57`
`57`	`58`	`/**`
Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@ val renderNewUsersTableForProfileView: FC<Props> = FC {`
`29`	`29`	`Fragment.create {`
`30`	`30`	`td {`
`31`	`31`	`className = ClassName("align-middle")`
`32`		`- renderUserAvatarWithName(cellContext.row.original, isHorizontal = true, classes = "mr-2") {`
	`32`	`+ renderUserAvatarWithName(cellContext.row.original) {`
`33`	`33`	`height = 3.rem`
`34`	`34`	`width = 3.rem`
`35`	`35`	`}`
`@@ -39,23 +39,21 @@ val renderNewUsersTableForProfileView: FC<Props> = FC {`
`39`	`39`	`column(id = "originalName", header = "Original login") { cellContext ->`
`40`	`40`	`Fragment.create {`
`41`	`41`	`td {`
`42`		`- className = ClassName("align-middle")`
	`42`	`+ className = ClassName("align-middle text-center")`
`43`	`43`	`+cellContext.value.originalLogins.firstNotNullOfOrNull { it.value }`
`44`	`44`	`}`
`45`	`45`	`}`
`46`	`46`	`}`
`47`	`47`	`column(id = "source", header = "Source") { cellContext ->`
`48`	`48`	`Fragment.create {`
`49`	`49`	`td {`
`50`		`- className = ClassName("align-middle")`
	`50`	`+ className = ClassName("align-middle text-center")`
`51`	`51`	`+cellContext.value.originalLogins.firstNotNullOfOrNull { it.key }`
`52`	`52`	`}`
`53`	`53`	`}`
`54`	`54`	`}`
`55`	`55`	`}`
`56`	`56`	`},`
`57`		`- initialPageSize = 10,`
`58`		`- useServerPaging = false,`
`59`	`57`	`isTransparentGrid = true,`
`60`	`58`	`)`
`61`	`59`