From 7058f0c8c245dab5ee3441f3d9193a8898acd530 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Sat, 28 Oct 2023 14:56:08 +0800
Subject: [PATCH] chore: add docs link in settings

---
 web/src/components/Settings/SSOSection.tsx    | 14 ++++++++++++-
 .../components/Settings/StorageSection.tsx    | 21 ++++++++++++++++++-
 web/src/components/Settings/SystemSection.tsx | 11 ++++++++++
 3 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/web/src/components/Settings/SSOSection.tsx b/web/src/components/Settings/SSOSection.tsx
index 2909bb525..8d8639c3e 100644
--- a/web/src/components/Settings/SSOSection.tsx
+++ b/web/src/components/Settings/SSOSection.tsx
@@ -1,6 +1,7 @@
-import { Divider } from "@mui/joy";
+import { Divider, List, ListItem } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
+import { Link } from "react-router-dom";
 import * as api from "@/helpers/api";
 import { useGlobalStore } from "@/store/module";
 import { useTranslate } from "@/utils/i18n";
@@ -104,6 +105,17 @@ const SSOSection = () => {
           </div>
         </div>
       ))}
+
+      <div className="w-full mt-8">
+        <p className="text-sm">{t("common.learn-more")}</p>
+        <List component="ul" marker="disc" size="sm">
+          <ListItem>
+            <Link className="text-sm hover:underline hover:text-blue-600" to="https://www.usememos.com/docs/get-started/keycloak">
+              Configuring Keycloak for Authentication
+            </Link>
+          </ListItem>
+        </List>
+      </div>
     </div>
   );
 };
diff --git a/web/src/components/Settings/StorageSection.tsx b/web/src/components/Settings/StorageSection.tsx
index 2471b952c..019b0a3c5 100644
--- a/web/src/components/Settings/StorageSection.tsx
+++ b/web/src/components/Settings/StorageSection.tsx
@@ -1,6 +1,7 @@
-import { Divider, IconButton, Radio, RadioGroup } from "@mui/joy";
+import { Divider, IconButton, List, ListItem, Radio, RadioGroup } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
+import { Link } from "react-router-dom";
 import * as api from "@/helpers/api";
 import { useGlobalStore } from "@/store/module";
 import { useTranslate } from "@/utils/i18n";
@@ -122,6 +123,24 @@ const StorageSection = () => {
           </div>
         ))}
       </div>
+      <div className="w-full mt-4">
+        <p className="text-sm">{t("common.learn-more")}</p>
+        <List component="ul" marker="disc" size="sm">
+          <ListItem>
+            <Link className="text-sm hover:underline hover:text-blue-600" to="https://www.usememos.com/docs/get-started/local-storage">
+              Docs - Local storage
+            </Link>
+          </ListItem>
+          <ListItem>
+            <Link
+              className="text-sm hover:underline hover:text-blue-600"
+              to="https://www.usememos.com/blog/choosing-a-storage-for-your-resource"
+            >
+              Choosing a Storage for Your Resource: Database, S3 or Local Storage?
+            </Link>
+          </ListItem>
+        </List>
+      </div>
     </div>
   );
 };
diff --git a/web/src/components/Settings/SystemSection.tsx b/web/src/components/Settings/SystemSection.tsx
index 83694eb94..6a005cff6 100644
--- a/web/src/components/Settings/SystemSection.tsx
+++ b/web/src/components/Settings/SystemSection.tsx
@@ -1,6 +1,7 @@
 import { Button, Divider, Input, Switch, Textarea, Tooltip } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
+import { Link } from "react-router-dom";
 import * as api from "@/helpers/api";
 import { formatBytes } from "@/helpers/utils";
 import { useGlobalStore } from "@/store/module";
@@ -370,6 +371,16 @@ const SystemSection = () => {
         value={state.additionalScript}
         onChange={(event) => handleAdditionalScriptChanged(event.target.value)}
       />
+      <div className="w-full">
+        <Link
+          className="text-gray-500 text-sm flex flex-row justify-start items-center mt-2 hover:underline hover:text-blue-600"
+          to="https://usememos.com/docs/get-started/custom-style-and-script"
+          target="_blank"
+        >
+          {t("common.learn-more")}
+          <Icon.ExternalLink className="inline w-4 h-auto ml-1" />
+        </Link>
+      </div>
     </div>
   );
 };