fix: private memos being public (#2480)

* fix(web/memo): filter out public option

Filter out the public option if we have disabled public memos

* feat(api/memo): sanity check for disabled public memos

In case something goes wrong, we check the system setting on the backend in order to valdiate if we can create a public memo

* refactor(web/memo): disable public option

Seems like a better option than removing it, as it looks werid if you are looking at a memo that is previously public

* fix(web/memo): use translation keys

* chore(web/editor): remove unsused tooltip

* revert(api/memo): sanity check

* fix(web/memo): allow admins to create public memos

* chore(web/memo): remove unused import

* fix(web/memo): check for both host and admin

* fix(web/memo): remove warning text from MemoDetail

web/src/components/MemoEditor/index.tsx

@@ -6,9 +6,11 @@ import { useTranslation } from "react-i18next";
 import useLocalStorage from "react-use/lib/useLocalStorage";
 import { TAB_SPACE_WIDTH, UNKNOWN_ID, VISIBILITY_SELECTOR_ITEMS } from "@/helpers/consts";
 import { clearContentQueryParam } from "@/helpers/utils";
+import useCurrentUser from "@/hooks/useCurrentUser";
 import { getMatchedNodes } from "@/labs/marked";
 import { useFilterStore, useGlobalStore, useMemoStore, useResourceStore, useTagStore, useUserStore } from "@/store/module";
 import { Resource } from "@/types/proto/api/v2/resource_service";
+import { User_Role } from "@/types/proto/api/v2/user_service";
 import { useTranslate } from "@/utils/i18n";
 import showCreateMemoRelationDialog from "../CreateMemoRelationDialog";
 import showCreateResourceDialog from "../CreateResourceDialog";
@@ -52,6 +54,7 @@ const MemoEditor = (props: Props) => {
   const memoStore = useMemoStore();
   const tagStore = useTagStore();
   const resourceStore = useResourceStore();
+  const currentUser = useCurrentUser();
   const [state, setState] = useState<State>({
     memoVisibility: "PRIVATE",
     resourceList: [],
@@ -407,6 +410,15 @@ const MemoEditor = (props: Props) => {
 
   const allowSave = (hasContent || state.resourceList.length > 0) && !state.isUploadingResource && !state.isRequesting;
 
+  const disableOption = (v: string) => {
+    const isAdminOrHost = currentUser.role === User_Role.ADMIN || currentUser.role === User_Role.HOST;
+
+    if (v === "PUBLIC" && !isAdminOrHost) {
+      return systemStatus.disablePublicMemos;
+    }
+    return false;
+  };
+
   return (
     <div
       className={`${
@@ -465,7 +477,7 @@ const MemoEditor = (props: Props) => {
             }}
           >
             {VISIBILITY_SELECTOR_ITEMS.map((item) => (
-              <Option key={item} value={item} className="whitespace-nowrap">
+              <Option key={item} value={item} className="whitespace-nowrap" disabled={disableOption(item)}>
                 {t(`memo.visibility.${item.toLowerCase() as Lowercase<typeof item>}`)}
               </Option>
             ))}

web/src/pages/MemoDetail.tsx

@@ -20,7 +20,7 @@ import useCurrentUser from "@/hooks/useCurrentUser";
 import useNavigateTo from "@/hooks/useNavigateTo";
 import { useGlobalStore, useMemoStore } from "@/store/module";
 import { useUserV1Store } from "@/store/v1";
-import { User } from "@/types/proto/api/v2/user_service";
+import { User, User_Role } from "@/types/proto/api/v2/user_service";
 import { useTranslate } from "@/utils/i18n";
 
 const MemoDetail = () => {
@@ -100,6 +100,15 @@ const MemoDetail = () => {
     await memoStore.fetchMemoById(memoId);
   };
 
+  const disableOption = (v: string) => {
+    const isAdminOrHost = currentUser.role === User_Role.ADMIN || currentUser.role === User_Role.HOST;
+
+    if (v === "PUBLIC" && !isAdminOrHost) {
+      return systemStatus.disablePublicMemos;
+    }
+    return false;
+  };
+
   return (
     <>
       <section className="relative top-0 w-full min-h-full overflow-x-hidden bg-zinc-100 dark:bg-zinc-900">
@@ -156,7 +165,7 @@ const MemoDetail = () => {
                       }}
                     >
                       {VISIBILITY_SELECTOR_ITEMS.map((item) => (
-                        <Option key={item} value={item} className="whitespace-nowrap">
+                        <Option key={item} value={item} className="whitespace-nowrap" disabled={disableOption(item)}>
                           {t(`memo.visibility.${item.toLowerCase() as Lowercase<typeof item>}`)}
                         </Option>
                       ))}