Fixing small FE problems (#2375)

Fixing small FE problems ### What's done: - alignment of avatars - fixing 404 page
saveourtool · Jul 27, 2023 · 61818d7 · 61818d7
1 parent 122068c
commit 61818d7
Show file tree

Hide file tree

Showing 18 changed files with 282 additions and 223 deletions.
diff --git a/api-gateway/src/main/resources/application-dev.yml b/api-gateway/src/main/resources/application-dev.yml
@@ -99,3 +99,13 @@ logging:
     org.springframework.web: DEBUG
     org.springframework.security: DEBUG
     com.nimbusds: TRACE
+
+---
+spring:
+  error:
+    whitelabel:
+      enabled: false
+
+server:
+  error:
+    path: /error
diff --git a/api-gateway/src/main/resources/application.yml b/api-gateway/src/main/resources/application.yml
@@ -120,3 +120,12 @@ spring:
             authorization-grant-type: authorization_code
             scope:
               - user_info
+---
+spring:
+  error:
+    whitelabel:
+      enabled: false
+
+server:
+  error:
+    path: /error
diff --git a/diktat-analysis.yml b/diktat-analysis.yml
@@ -133,3 +133,7 @@
     - GetMapping
     - PostMapping
     - Repository
+  # reduces speed of development on the FE
+  # will remove it by for now
+- name: MAGIC_NUMBER
+  enabled: false
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"),
+    ERROR_404("404"),
     INDEX(""),
     MANAGE_ORGANIZATIONS("organizations"),
     NOT_FOUND("not-found"),

diff --git a/...rontend/src/main/kotlin/com/saveourtool/save/frontend/components/basic/AvatarRenderers.kt b/...rontend/src/main/kotlin/com/saveourtool/save/frontend/components/basic/AvatarRenderers.kt
@@ -5,6 +5,7 @@
 package com.saveourtool.save.frontend.components.basic
 
 import com.saveourtool.save.entities.OrganizationDto
+import com.saveourtool.save.entities.OrganizationStatus
 import com.saveourtool.save.frontend.utils.AVATAR_PROFILE_PLACEHOLDER
 import com.saveourtool.save.info.UserInfo
 import com.saveourtool.save.info.UserStatus
@@ -35,7 +36,12 @@ fun ChildrenBuilder.renderAvatar(
     classes: String = "",
     link: String? = null,
     styleBuilder: CSSProperties.() -> Unit = {},
-) = renderAvatar(organizationDto.avatar ?: ORGANIZATION_AVATAR_PLACEHOLDER, classes, link, styleBuilder)
+) = renderAvatar(
+    organizationDto.avatar?.let { "/api/$v1/avatar/$it" } ?: ORGANIZATION_AVATAR_PLACEHOLDER,
+    classes,
+    link ?: "/${organizationDto.name}",
+    styleBuilder
+)
 
 /**
  * Render user avatar or placeholder
@@ -44,14 +50,16 @@ fun ChildrenBuilder.renderAvatar(
  * @param classes classes applied to [img] html tag
  * @param link link to redirect to if clicked
  * @param styleBuilder [CSSProperties] builder
+ * @param isLinkActive
  */
 fun ChildrenBuilder.renderAvatar(
     userInfo: UserInfo?,
     classes: String = "",
     link: String? = null,
+    isLinkActive: Boolean = true,
     styleBuilder: CSSProperties.() -> Unit,
 ) {
-    val newLink = link?.takeIf { userInfo?.status != UserStatus.DELETED }
+    val newLink = (link ?: "/${FrontendRoutes.PROFILE}/${userInfo?.name}").takeIf { userInfo?.status != UserStatus.DELETED && isLinkActive }
     return renderAvatar(
         userInfo?.avatar?.let { "/api/$v1/avatar$it" } ?: AVATAR_PROFILE_PLACEHOLDER,
         classes,
@@ -73,7 +81,7 @@ fun ChildrenBuilder.renderUserAvatarWithName(
     styleBuilder: CSSProperties.() -> Unit = {},
 ) {
     val renderImg: ChildrenBuilder.() -> Unit = {
-        renderAvatar(userInfo, classes, link, styleBuilder)
+        renderAvatar(userInfo, classes, link, styleBuilder = styleBuilder)
         +" ${userInfo.name}"
     }
     return if (userInfo.status != UserStatus.DELETED) {
@@ -86,6 +94,32 @@ fun ChildrenBuilder.renderUserAvatarWithName(
     }
 }
 
+/**
+ * @param organizationDto
+ * @param classes
+ * @param link
+ * @param styleBuilder
+ */
+fun ChildrenBuilder.renderOrganizationWithName(
+    organizationDto: OrganizationDto,
+    classes: String = "",
+    link: String? = null,
+    styleBuilder: CSSProperties.() -> Unit = {},
+) {
+    val renderImg: ChildrenBuilder.() -> Unit = {
+        renderAvatar(organizationDto, classes, link, styleBuilder = styleBuilder)
+        +" ${organizationDto.name}"
+    }
+    return if (organizationDto.status != OrganizationStatus.DELETED) {
+        Link {
+            to = link ?: "/${organizationDto.name}"
+            renderImg()
+        }
+    } else {
+        renderImg()
+    }
+}
+
 private fun ChildrenBuilder.renderAvatar(
     avatarLink: String,
     classes: String,

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
@@ -40,7 +40,7 @@ val topBarComponent: FC<TopBarProps> = FC { props ->
         topBarUrlSplits {
             this.location = location
         }
-        if (location.notIn(listOf(FrontendRoutes.REGISTRATION, FrontendRoutes.INDEX))) {
+        if (location.notIn(listOf(FrontendRoutes.REGISTRATION, FrontendRoutes.INDEX, FrontendRoutes.ERROR_404))) {
             topBarLinks { this.location = location }
         }
         topBarUserField {

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,7 +2,6 @@
 
 package com.saveourtool.save.frontend.components.topbar
 
-import com.saveourtool.save.frontend.utils.isIndex
 import com.saveourtool.save.frontend.utils.isVuln
 import com.saveourtool.save.validation.FrontendRoutes
 
@@ -50,7 +49,6 @@ val topBarLinks: FC<TopBarLinksProps> = FC { props ->
         className = ClassName("navbar-nav mx-auto")
         when {
             props.location.isVuln() -> vulnTopbarLinks
-            props.location.isIndex() -> vulnTopbarLinks
             else -> saveTopbarLinks
         }
             .forEach { elem ->
@@ -65,7 +63,14 @@ val topBarLinks: FC<TopBarLinksProps> = FC { props ->
                         }
                     } else {
                         Link {
-                            className = ClassName("nav-link d-flex align-items-center me-2 ${textColor(elem.hrefAnchor, props.location)} active")
+                            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
@@ -102,8 +107,9 @@ data class TopBarLink(
 private fun textColor(
     hrefAnchor: String,
     location: Location,
-) = if (location.pathname.endsWith(hrefAnchor) && location.pathname.count { it == '/' } < TOP_BAR_PATH_SEGMENTS_HIGHLIGHT) {
-    "text-warning"
-} else {
-    "text-light"
-}
+) =
+        if (location.pathname.endsWith(hrefAnchor) && location.pathname.count { it == '/' } < TOP_BAR_PATH_SEGMENTS_HIGHLIGHT) {
+            "text-warning"
+        } else {
+            "text-light"
+        }
diff --git a/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/views/FallbackView.kt b/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/views/FallbackView.kt
@@ -5,15 +5,18 @@
 package com.saveourtool.save.frontend.components.views
 
 import com.saveourtool.save.frontend.utils.Style
+import com.saveourtool.save.frontend.utils.buttonBuilder
 
+import js.core.jso
 import react.*
 import react.dom.html.ReactHTML.a
 import react.dom.html.ReactHTML.div
-import react.dom.html.ReactHTML.h3
+import react.dom.html.ReactHTML.img
 import react.dom.html.ReactHTML.p
 import react.router.dom.Link
-import web.cssom.ClassName
+import web.cssom.*
 
+import kotlinx.browser.document
 import kotlinx.browser.window
 
 /**
@@ -45,31 +48,63 @@ external interface FallbackViewProps : Props {
 class FallbackView : AbstractView<FallbackViewProps, State>(Style.SAVE_LIGHT) {
     @Suppress("ForbiddenComment")
     override fun ChildrenBuilder.render() {
+        // FixMe: not able to use "remove()" here due to some internal problem
+        // FixMe: or fix links
+        // so removing top bar for fallback view with a small hack
+        document.getElementById("navigation-top-bar")
+            ?.setAttribute("style", "opacity: 0; cursor: default")
+
         div {
             className = ClassName("text-center")
+            style = jso {
+                height = 40.rem
+            }
+
             div {
-                className = ClassName("error mx-auto")
+                className = ClassName("error mx-auto mt-5")
                 props.bigText?.let {
                     asDynamic()["data-text"] = it
                 }
                 +"${props.bigText}"
             }
+
             p {
-                className = ClassName("lead text-gray-800 mb-5")
+                className = ClassName("lead text-gray-800 mb-3")
                 +"${props.smallText}"
             }
+
             if (props.withRouterLink == true) {
                 Link {
                     to = "/"
-                    h3 {
-                        +"← Back to the main page"
-                    }
+                    buttonBuilder("Back to the main page", style = "info") { }
                 }
             } else {
                 a {
                     href = "${window.location.origin}/"
-                    h3 {
-                        +"← Back to the main page"
+                    buttonBuilder("Back to the main page", style = "info") { }
+                }
+            }
+
+            div {
+                className = ClassName("row mt-3 justify-content-center")
+                div {
+                    className = ClassName("col-4")
+                    p {
+                        className = ClassName("lead text-gray-800")
+                        +"Report a problem:"
+                    }
+
+                    a {
+                        className = ClassName("mt-3")
+                        href = "https://github.com/saveourtool/save-cloud"
+                        img {
+                            src = "img/github.svg"
+                            style = jso {
+                                width = 5.rem
+                                height = 5.rem
+                                cursor = "pointer".unsafeCast<Cursor>()
+                            }
+                        }
                     }
                 }
             }

diff --git a/...ontend/src/main/kotlin/com/saveourtool/save/frontend/components/views/OrganizationView.kt b/...ontend/src/main/kotlin/com/saveourtool/save/frontend/components/views/OrganizationView.kt
@@ -205,7 +205,7 @@ class OrganizationView : AbstractView<OrganizationProps, OrganizationViewState>(
                 isEditDisabled = true
                 selfRole = highestRole
                 usersInOrganization = users
-                avatar = organizationLoaded.avatar?.let { "/api/$v1/avatar$it" } ?: AVATAR_PROFILE_PLACEHOLDER
+                avatar = organizationLoaded.avatar?.let { "/api/$v1/avatar$it" } ?: ORGANIZATION_AVATAR_PLACEHOLDER
             }
             urlAnalysis(OrganizationMenuBar, highestRole, organizationLoaded.canCreateContests)
         }
@@ -242,32 +242,32 @@ class OrganizationView : AbstractView<OrganizationProps, OrganizationViewState>(
         "PARAMETER_NAME_IN_OUTER_LAMBDA",
     )
     private fun ChildrenBuilder.renderInfo() {
-        // ================= Title for TOP projects ===============
-        div {
-            className = ClassName("row justify-content-center mb-2")
-            h4 {
-                +"Top Tools"
-            }
-        }
-
         // ================= Rows for TOP projects ================
         val topProjects = state.projects.sortedByDescending { it.contestRating }.take(TOP_PROJECTS_NUMBER)
 
-        div {
-            className = ClassName("row justify-content-center")
+        if (topProjects.isNotEmpty()) {
+            // ================= Title for TOP projects ===============
+            div {
+                className = ClassName("row justify-content-center mb-2")
+                h4 {
+                    +"Top Tools"
+                }
+            }
+            div {
+                className = ClassName("row justify-content-center")
 
-            renderTopProject(topProjects.getOrNull(0))
-            renderTopProject(topProjects.getOrNull(1))
-        }
+                renderTopProject(topProjects.getOrNull(0))
+                renderTopProject(topProjects.getOrNull(1))
+            }
 
-        @Suppress("MAGIC_NUMBER")
-        div {
-            className = ClassName("row justify-content-center")
+            @Suppress("MAGIC_NUMBER")
+            div {
+                className = ClassName("row justify-content-center")
 
-            renderTopProject(topProjects.getOrNull(2))
-            renderTopProject(topProjects.getOrNull(3))
+                renderTopProject(topProjects.getOrNull(2))
+                renderTopProject(topProjects.getOrNull(3))
+            }
         }
-
         div {
             className = ClassName("row justify-content-center")
 

diff --git a/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/views/ProjectView.kt b/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/views/ProjectView.kt
@@ -219,7 +219,6 @@ class ProjectView : AbstractView<ProjectViewProps, ProjectViewState>(Style.SAVE_
             ProjectMenuBar.SETTINGS -> renderSettings()
             ProjectMenuBar.INFO -> renderInfo()
             ProjectMenuBar.DEMO -> renderDemo()
-            ProjectMenuBar.SECURITY -> renderSecurity()
             ProjectMenuBar.FILES -> renderFiles()
         }
     }

diff --git a/...d/src/main/kotlin/com/saveourtool/save/frontend/components/views/contests/GlobalRating.kt b/...d/src/main/kotlin/com/saveourtool/save/frontend/components/views/contests/GlobalRating.kt
@@ -141,7 +141,7 @@ private fun ChildrenBuilder.renderingProjectChampionsTable(
                     strong {
                         className = ClassName("d-block text-gray-dark")
                         Link {
-                            to = "/${project.url}"
+                            to = "/${project.organizationName}/${project.name}"
                             +project.name
                         }
                     }