buttonBuilder for fontAwesomeIcons (#1338)

* buttonBuilder for fontAwesomeIcons

### What's done:
* Implemented buttonBuilder for icons
* Started to replace existing button tags with buttonBuilders

(#1320)

Co-authored-by: Peter Trifanov <peter.trifanov@gmail.com>

Author: sanyavertolet

save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/basic/codeeditor/EditorToolbar.kt

@@ -8,11 +8,8 @@ import com.saveourtool.save.frontend.externals.reactace.AceModes
 import com.saveourtool.save.frontend.externals.reactace.AceThemes
 import com.saveourtool.save.frontend.utils.buttonBuilder
 import com.saveourtool.save.frontend.utils.selectorBuilder
-import com.saveourtool.save.frontend.utils.withUnusedArg
 import csstype.ClassName
 import react.ChildrenBuilder
-import react.dom.html.ButtonType
-import react.dom.html.ReactHTML.button
 import react.dom.html.ReactHTML.div
 
 private val toolbarCard = cardComponent(isBordered = true)
@@ -54,24 +51,11 @@ fun ChildrenBuilder.displayCodeEditorToolbar(
             className = ClassName("input-group")
             div {
                 className = ClassName("input-group-prepend")
-
-                button {
-                    type = ButtonType.button
-                    className = ClassName("btn btn-outline-primary")
-                    onClick = onUploadChanges.withUnusedArg()
-                    fontAwesomeIcon(icon = faUpload)
-                    asDynamic()["data-toggle"] = "tooltip"
-                    asDynamic()["data-placement"] = "top"
-                    title = "Save changes on server"
+                buttonBuilder(faUpload, isOutline = true, title = "Save changes on server") {
+                    onUploadChanges()
                 }
-                button {
-                    type = ButtonType.button
-                    className = ClassName("btn btn-outline-primary")
-                    onClick = onReloadChanges.withUnusedArg()
-                    fontAwesomeIcon(icon = faDownload)
-                    asDynamic()["data-toggle"] = "tooltip"
-                    asDynamic()["data-placement"] = "top"
-                    title = "Load changes from server"
+                buttonBuilder(faDownload, isOutline = true, title = "Save changes on server") {
+                    onReloadChanges()
                 }
                 FileType.values().forEach { fileType ->
                     val buttonStyle = if (hasUncommittedChanges.getValue(fileType)) {
@@ -107,24 +91,11 @@ fun ChildrenBuilder.displayCodeEditorToolbar(
             }
             div {
                 className = ClassName("input-group-append")
-
-                button {
-                    type = ButtonType.button
-                    className = ClassName("btn btn-outline-info")
-                    onClick = onResultReload.withUnusedArg()
-                    fontAwesomeIcon(icon = faReload)
-                    asDynamic()["data-toggle"] = "tooltip"
-                    asDynamic()["data-placement"] = "top"
-                    title = "Fetch debug info"
+                buttonBuilder(faReload, style = "info", isOutline = true, title = "Fetch debug info") {
+                    onResultReload()
                 }
-                button {
-                    type = ButtonType.button
-                    className = ClassName("btn btn-outline-success")
-                    onClick = onRunExecution.withUnusedArg()
-                    fontAwesomeIcon(icon = faCaretSquareRight)
-                    asDynamic()["data-toggle"] = "tooltip"
-                    asDynamic()["data-placement"] = "top"
-                    title = "Run execution"
+                buttonBuilder(faCaretSquareRight, style = "success", isOutline = true, title = "Run execution") {
+                    onRunExecution()
                 }
             }
         }

save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/views/SandboxView.kt

@@ -198,14 +198,9 @@ class SandboxView : AbstractView<Props, SandboxViewState>(true) {
                     role = "alert".unsafeCast<AriaRole>()
                     div {
                         displayTestResultDebugInfoStatus(debugInfo)
-                        button {
-                            type = ButtonType.button
-                            className = ClassName("btn btn-link p-0")
-                            +"See more details..."
-                            onClick = {
-                                setState {
-                                    isModalOpen = true
-                                }
+                        buttonBuilder("See more details...", "link", classes = "p-0") {
+                            setState {
+                                isModalOpen = true
                             }
                         }
                     }

save-frontend/src/main/kotlin/com/saveourtool/save/frontend/utils/ChildrenBuilderUtils.kt

@@ -6,6 +6,8 @@
 
 package com.saveourtool.save.frontend.utils
 
+import com.saveourtool.save.frontend.externals.fontawesome.FontAwesomeIconModule
+import com.saveourtool.save.frontend.externals.fontawesome.fontAwesomeIcon
 import csstype.ClassName
 import dom.html.HTMLButtonElement
 import dom.html.HTMLSelectElement
@@ -29,16 +31,16 @@ enum class ConfirmationType {
 }
 
 /**
- * Function to create buttons for modals
+ * Function to create buttons for modals with text as content
  *
  * @param label text that will be displayed on button
  * @param style color-defining string
  * @param isDisabled flag that might disable button
  * @param isOutline flag that defines either usual button or outlined will be displayed
  * @param isActive flag that defines whether button should be displayed as pressed or not
  * @param classes additional classes for button
- * @param onClickFun button click handler
  * @param title title for tooltip
+ * @param onClickFun button click handler
  */
 @Suppress("TOO_MANY_PARAMETERS", "LongParameterList")
 fun ChildrenBuilder.buttonBuilder(
@@ -51,28 +53,33 @@ fun ChildrenBuilder.buttonBuilder(
     title: String? = null,
     onClickFun: MouseEventHandler<HTMLButtonElement>,
 ) {
-    button {
-        type = ButtonType.button
-        val outline = if (isOutline) {
-            "outline-"
-        } else {
-            ""
-        }
-        val active = if (isActive) {
-            "active"
-        } else {
-            ""
-        }
-        className = ClassName("btn btn-$outline$style $active $classes")
-        disabled = isDisabled
-        onClick = onClickFun
-        title?.let {
-            asDynamic()["data-toggle"] = "tooltip"
-            asDynamic()["data-placement"] = "top"
-        }
-        this.title = title
-        +label
-    }
+    buttonBuilder({ +label }, style, isDisabled, isOutline, isActive, classes, title, onClickFun)
+}
+
+/**
+ * Function to create buttons for modals with icon as content
+ *
+ * @param icon icon that will be displayed on button
+ * @param style color-defining string
+ * @param isDisabled flag that might disable button
+ * @param isOutline flag that defines either usual button or outlined will be displayed
+ * @param isActive flag that defines whether button should be displayed as pressed or not
+ * @param classes additional classes for button
+ * @param title title for tooltip
+ * @param onClickFun button click handler
+ */
+@Suppress("TOO_MANY_PARAMETERS", "LongParameterList")
+fun ChildrenBuilder.buttonBuilder(
+    icon: FontAwesomeIconModule,
+    style: String = "primary",
+    isDisabled: Boolean = false,
+    isOutline: Boolean = false,
+    isActive: Boolean = false,
+    classes: String = "",
+    title: String? = null,
+    onClickFun: MouseEventHandler<HTMLButtonElement>,
+) {
+    buttonBuilder({ fontAwesomeIcon(icon) }, style, isDisabled, isOutline, isActive, classes, title, onClickFun)
 }
 
 /**
@@ -104,3 +111,39 @@ fun ChildrenBuilder.selectorBuilder(
         }
     }
 }
+
+@Suppress("TOO_MANY_PARAMETERS", "LongParameterList", "LAMBDA_IS_NOT_LAST_PARAMETER")
+private fun ChildrenBuilder.buttonBuilder(
+    labelBuilder: ChildrenBuilder.() -> Unit,
+    style: String = "primary",
+    isDisabled: Boolean = false,
+    isOutline: Boolean = false,
+    isActive: Boolean = false,
+    classes: String = "",
+    title: String? = null,
+    onClickFun: MouseEventHandler<HTMLButtonElement>,
+) {
+    button {
+        type = ButtonType.button
+        val builtClasses = buildString {
+            append("btn btn-")
+            if (isOutline) {
+                append("outline-")
+            }
+            append(style)
+            if (isActive) {
+                append(" active")
+            }
+            append(" $classes")
+        }
+        className = ClassName(builtClasses)
+        disabled = isDisabled
+        onClick = onClickFun
+        title?.let {
+            asDynamic()["data-toggle"] = "tooltip"
+            asDynamic()["data-placement"] = "top"
+            this.title = title
+        }
+        labelBuilder()
+    }
+}