webui: Add Sidebar buttons that link to docs and support.

y-scope · May 1, 2024 · 63c06e5 · 63c06e5
1 parent 64fa68b
commit 63c06e5
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 121 deletions.
diff --git a/components/webui/imports/ui/SearchView/SearchControls/index.jsx b/components/webui/imports/ui/SearchView/SearchControls/index.jsx
@@ -90,6 +90,7 @@ const SearchControls = ({
         CLP_STORAGE_ENGINES.CLP === Meteor.settings.public.ClpStorageEngine ?
             "Enter a wildcard query..." :
             "Enter a KQL query...";
+
     return (
         <>
             <Form onSubmit={handleQuerySubmission}>

diff --git a/components/webui/imports/ui/Sidebar/Sidebar.jsx b/components/webui/imports/ui/Sidebar/Sidebar.jsx
@@ -1,10 +1,11 @@
-import {NavLink} from "react-router-dom";
-
 import {
     faAngleDoubleLeft,
     faAngleDoubleRight,
+    faCircleInfo,
+    faMessage,
 } from "@fortawesome/free-solid-svg-icons";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+
+import SidebarButton from "./SidebarButton";
 
 import "./Sidebar.scss";
 
@@ -23,60 +24,47 @@ const Sidebar = ({
     isSidebarCollapsed,
     routes,
     onSidebarToggle,
-}) => {
-    return (
-        <div
-            id={"sidebar"}
-            className={isSidebarCollapsed ?
-                "collapsed" :
-                ""}
-        >
-            <div className={"brand"}>
-                {!isSidebarCollapsed && <b style={{marginRight: "0.25rem"}}>YScope</b>}
-                {isSidebarCollapsed ?
-                    <b>CLP</b> :
-                    "CLP"}
-            </div>
+}) => (
+    <div
+        id={"sidebar"}
+        className={isSidebarCollapsed ?
+            "collapsed" :
+            ""}
+    >
+        <div className={"brand"}>
+            {!isSidebarCollapsed && <b style={{marginRight: "0.25rem"}}>YScope</b>}
+            {isSidebarCollapsed ?
+                <b>CLP</b> :
+                "CLP"}
+        </div>
 
-            <div className={"flex-column sidebar-menu"}>
-                {routes.map((route, i) => (false === (route.hide ?? false)) && (
-                    <NavLink
-                        activeClassName={"active"}
-                        key={i}
-                        to={route.path}
-                    >
-                        <div className={"sidebar-item-icon"}>
-                            <FontAwesomeIcon
-                                fixedWidth={true}
-                                icon={route.icon}
-                                size={"sm"}/>
-                        </div>
-                        <span className={"sidebar-item-text"}>
-                            {route.label}
-                        </span>
-                    </NavLink>
-                ))}
-            </div>
+        <div className={"flex-grow-1 sidebar-menu"}>
+            {routes.map((route, i) => (false === (route.hide ?? false)) && (
+                <SidebarButton
+                    icon={route.icon}
+                    key={i}
+                    label={route.label}
+                    link={route.path}/>
+            ))}
+        </div>
 
-            <div
-                className={"sidebar-collapse-toggle"}
-                onClick={onSidebarToggle}
-            >
-                <div className={"sidebar-collapse-icon"}>
-                    {
-                        isSidebarCollapsed ?
-                            <FontAwesomeIcon
-                                icon={faAngleDoubleRight}
-                                size={"sm"}/> :
-                            <FontAwesomeIcon
-                                icon={faAngleDoubleLeft}
-                                size={"sm"}/>
-                    }
-                </div>
-                <span className={"sidebar-collapse-text"}>Collapse Menu</span>
-            </div>
+        <div className={"flex-grow-0 sidebar-menu"}>
+            <SidebarButton
+                icon={faCircleInfo}
+                label={"Documentation"}
+                link={"https://docs.yscope.com/clp/main/"}/>
+            <SidebarButton
+                icon={faMessage}
+                label={"Get Support"}
+                link={Meteor.settings.public.SupportUrl}/>
+            <SidebarButton
+                label={"Collapse Menu"}
+                icon={isSidebarCollapsed ?
+                    faAngleDoubleRight :
+                    faAngleDoubleLeft}
+                onClick={onSidebarToggle}/>
         </div>
-    );
-};
+    </div>
+);
 
 export default Sidebar;
diff --git a/components/webui/imports/ui/Sidebar/Sidebar.scss b/components/webui/imports/ui/Sidebar/Sidebar.scss
@@ -35,6 +35,7 @@
   display: flex;
   flex-direction: column;
   overflow-y: auto;
+  user-select: none;
 }
 
 .sidebar-item-icon {
@@ -71,6 +72,8 @@
   white-space: nowrap;
 
   transition: width 0.5s;
+
+  cursor: pointer;
 }
 
 .sidebar-menu a:hover, .sidebar-menu .active {
@@ -86,68 +89,3 @@
 .sidebar-menu .active {
   background-color: #004952;
 }
-
-.sidebar-collapse-toggle {
-  border-left: 1px solid #333;
-
-  line-height: 3rem;
-  overflow: hidden;
-  text-align: center;
-  white-space: nowrap;
-
-  cursor: pointer;
-  user-select: none;
-}
-
-.sidebar-collapse-icon {
-  display: inline-block;
-
-  width: 1.5rem;
-
-  text-align: center;
-
-  transition: width 0.5s;
-}
-
-#sidebar.collapsed .sidebar-collapse-icon {
-  width: 3rem;
-}
-
-.sidebar-collapse-text {
-  opacity: inherit;
-  transition: opacity 0.5s;
-}
-
-#sidebar.collapsed .sidebar-collapse-text {
-  opacity: 0;
-}
-
-.sidebar-collapse-toggle:hover {
-  background: #0d5259;
-  border-left: 1px solid #dedede;
-}
-
-.sidebar-menu a.logout:hover {
-  background: #580000;
-}
-
-#sidebar .sidebar-menu::-webkit-scrollbar {
-  width: 4px;
-  border-radius: 2px;
-}
-
-#sidebar .sidebar-menu::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-right: 1px solid rgb(34, 45, 50);
-  border-radius: 2px;
-}
-
-#sidebar .sidebar-menu::-webkit-scrollbar-thumb {
-  background: #888;
-  border-radius: 2px;
-}
-
-#sidebar .sidebar-menu::-webkit-scrollbar-thumb:hover {
-  background: #555;
-  border-radius: 2px;
-}
diff --git a/components/webui/imports/ui/Sidebar/SidebarButton.jsx b/components/webui/imports/ui/Sidebar/SidebarButton.jsx
@@ -0,0 +1,61 @@
+import {NavLink} from "react-router-dom";
+
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+
+
+/**
+ * Component for rendering a sidebar link.
+ *
+ * @param {object} props
+ * @param {import("@fortawesome/react-fontawesome").IconProp} props.icon
+ * @param {string} props.label
+ * @param {string} [props.link]
+ * @param {Function} [props.onClick]
+ * @return {React.ReactElement}
+ */
+const SidebarButton = ({
+    icon,
+    label,
+    link,
+    onClick,
+}) => {
+    const children = (
+        <>
+            <div className={"sidebar-item-icon"}>
+                <FontAwesomeIcon
+                    fixedWidth={true}
+                    icon={icon}
+                    size={"sm"}/>
+            </div>
+            <span className={"sidebar-item-text"}>
+                {label}
+            </span>
+        </>
+    );
+
+    const isNavLink = ("undefined" !== typeof link) && link.startsWith("/");
+    if (isNavLink) {
+        return (
+            <NavLink
+                activeClassName={"active"}
+                to={link}
+                onClick={onClick}
+            >
+                {children}
+            </NavLink>
+        );
+    }
+
+    return (
+        <a
+            href={link}
+            rel={"noreferrer"}
+            target={"_blank"}
+            onClick={onClick}
+        >
+            {children}
+        </a>
+    );
+};
+
+export default SidebarButton;
diff --git a/components/webui/settings.json b/components/webui/settings.json
@@ -15,6 +15,7 @@
     "CompressionJobsCollectionName": "compression-jobs",
     "SearchResultsCollectionName": "search-results",
     "SearchResultsMetadataCollectionName": "results-metadata",
-    "StatsCollectionName": "stats"
+    "StatsCollectionName": "stats",
+    "SupportUrl": "https://github.com/y-scope/clp/issues/new/choose"
   }
 }