docs: Add link to docs in settings dialog and sidebar. (#134)

Co-authored-by: kirkrodrigues <[email protected]>
y-scope · Nov 28, 2024 · e363c45 · e363c45
1 parent 939d4ac
commit e363c45
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 8 deletions.
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx
@@ -9,12 +9,14 @@ import {
 } from "@mui/joy";
 import SvgIcon from "@mui/material/SvgIcon";
 
+import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import SearchIcon from "@mui/icons-material/Search";
 import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
 
 import {StateContext} from "../../../../contexts/StateContextProvider";
 import {TAB_NAME} from "../../../../typings/tab";
+import {openInNewTab} from "../../../../utils/url";
 import SettingsModal from "../../../modals/SettingsModal";
 import FileInfoTabPanel from "./FileInfoTabPanel";
 import SearchTabPanel from "./SearchTabPanel";
@@ -23,6 +25,8 @@ import TabButton from "./TabButton";
 import "./index.css";
 
 
+const DOCUMENTATION_URL = "https://docs.yscope.com/yscope-log-viewer/main/user-guide/index.html";
+
 /**
  * Lists information for each tab.
  */
@@ -63,6 +67,9 @@ const SidebarTabs = forwardRef<HTMLDivElement, SidebarTabsProps>((
             case TAB_NAME.SETTINGS:
                 setIsSettingsModalOpen(true);
                 break;
+            case TAB_NAME.DOCUMENTATION:
+                openInNewTab(DOCUMENTATION_URL);
+                break;
             default:
                 onActiveTabNameChange(tabName);
         }
@@ -88,9 +95,14 @@ const SidebarTabs = forwardRef<HTMLDivElement, SidebarTabsProps>((
                             onTabButtonClick={handleTabButtonClick}/>
                     ))}
 
-                    {/* Forces the settings tab to bottom of sidebar. */}
+                    {/* Forces the help and settings tabs to the bottom of the sidebar. */}
                     <div className={"sidebar-tab-list-spacing"}/>
 
+                    <TabButton
+                        Icon={HelpOutlineIcon}
+                        tabName={TAB_NAME.DOCUMENTATION}
+                        onTabButtonClick={handleTabButtonClick}/>
+
                     <TabButton
                         Icon={SettingsOutlinedIcon}
                         tabName={TAB_NAME.SETTINGS}

diff --git a/src/components/modals/SettingsModal/SettingsDialog.tsx b/src/components/modals/SettingsModal/SettingsDialog.tsx
@@ -13,6 +13,7 @@ import {
     FormHelperText,
     FormLabel,
     Input,
+    Link,
     ModalDialog,
 } from "@mui/joy";
 
@@ -33,13 +34,22 @@ import ThemeSwitchToggle from "./ThemeSwitchToggle";
 
 const CONFIG_FORM_FIELDS = [
     {
-        helperText: `[JSON] Log message conversion pattern: use field placeholders to insert
-        values from JSON log events. The syntax is
-        \`{<field-name>[:<formatter-name>[:<formatter-options>]]}\`, where \`field-name\` is
-        required, while \`formatter-name\` and \`formatter-options\` are optional. For example,
-        the following placeholder would format a timestamp field with name \`@timestamp\`:
-        \`{@timestamp:timestamp:YYYY-MM-DD HH\\:mm\\:ss.SSS}\`. Leave format string blank to
-        display the entire log event formatted as JSON.`,
+        helperText: (
+            <p>
+                [JSON] Format string for formatting a JSON log event as plain text. See the
+                {" "}
+                <Link
+                    href={"https://docs.yscope.com/yscope-log-viewer/main/user-guide/format-struct-logs-overview.html"}
+                    level={"body-sm"}
+                    rel={"noopener"}
+                    target={"_blank"}
+                >
+                    format string syntax docs
+                </Link>
+                {" "}
+                or leave this blank to display the entire log event.
+            </p>
+        ),
         initialValue: getConfig(CONFIG_KEY.DECODER_OPTIONS).formatString,
         label: "Decoder: Format string",
         name: LOCAL_STORAGE_KEY.DECODER_OPTIONS_FORMAT_STRING,

diff --git a/src/typings/tab.ts b/src/typings/tab.ts
@@ -1,5 +1,6 @@
 enum TAB_NAME {
     NONE = "none",
+    DOCUMENTATION = "documentation",
     FILE_INFO = "fileInfo",
     SEARCH = "search",
     SETTINGS = "settings",
@@ -10,6 +11,7 @@ enum TAB_NAME {
  */
 const TAB_DISPLAY_NAMES: Record<TAB_NAME, string> = Object.freeze({
     [TAB_NAME.NONE]: "None",
+    [TAB_NAME.DOCUMENTATION]: "Documentation",
     [TAB_NAME.FILE_INFO]: "File info",
     [TAB_NAME.SEARCH]: "Search",
     [TAB_NAME.SETTINGS]: "Settings",

diff --git a/src/utils/url.ts b/src/utils/url.ts
@@ -44,8 +44,17 @@ const getBasenameFromUrlOrDefault = (
     return basename;
 };
 
+/**
+ * Opens a given URL in a new browser tab.
+ *
+ * @param url
+ */
+const openInNewTab = (url: string): void => {
+    window.open(url, "_blank", "noopener");
+};
 
 export {
     getAbsoluteUrl,
     getBasenameFromUrlOrDefault,
+    openInNewTab,
 };