feat(TagSelector): Create `tag` operation associated with permission control

ui/src/components/TagSelector/index.tsx

@@ -6,9 +6,9 @@ import { useTranslation } from 'react-i18next';
 import { marked } from 'marked';
 import classNames from 'classnames';
 
-import { useTagModal } from '@/hooks';
+import { useTagModal, useToast } from '@/hooks';
 import type * as Type from '@/common/interface';
-import { queryTags } from '@/services';
+import { queryTags, useUserPermission } from '@/services';
 
 import './index.scss';
 
@@ -42,7 +42,8 @@ const TagSelector: FC<IProps> = ({
   const [tags, setTags] = useState<Type.Tag[] | null>(null);
   const { t } = useTranslation('translation', { keyPrefix: 'tag_selector' });
   const [visibleMenu, setVisibleMenu] = useState(false);
-
+  const { data: userPermission } = useUserPermission('tag.add');
+  const toast = useToast();
   const tagModal = useTagModal({
     onConfirm: (data) => {
       if (!(onChange instanceof Function)) {
@@ -183,6 +184,19 @@ const TagSelector: FC<IProps> = ({
       }
     }
   };
+
+  const handleCreate = () => {
+    const tagAddPermission = userPermission?.['tag.add'];
+    if (!tagAddPermission || tagAddPermission?.has_permission) {
+      tagModal.onShow(searchValue);
+    } else if (tagAddPermission?.no_permission_tip) {
+      toast.onShow({
+        msg: tagAddPermission.no_permission_tip,
+        variant: 'danger',
+      });
+    }
+  };
+
   return (
     <div
       className="tag-selector-wrap"
@@ -261,9 +275,7 @@ const TagSelector: FC<IProps> = ({
                 <Button
                   variant="link"
                   className="px-3 btn-no-border w-100 text-start"
-                  onClick={() => {
-                    tagModal.onShow(searchValue);
-                  }}>
+                  onClick={handleCreate}>
                   + {t('create_btn')}
                 </Button>
               )}

ui/src/hooks/useToast/index.tsx

@@ -9,7 +9,7 @@ toastPortal.style.top = '90px';
 toastPortal.style.left = '0';
 toastPortal.style.right = '0';
 toastPortal.style.margin = 'auto';
-toastPortal.style.zIndex = '5';
+toastPortal.style.zIndex = '1001';
 
 const setPortalPosition = () => {
   const header = document.querySelector('#header');

ui/src/pages/Questions/Ask/index.tsx

@@ -16,7 +16,6 @@ import {
   questionDetail,
   modifyQuestion,
   useQueryRevisions,
-  // postAnswer,
   useQueryQuestionByTitle,
   getTagsBySlugName,
   saveQuestionWidthAnaser,

ui/src/services/client/user.ts

@@ -20,3 +20,60 @@ export const userSearchByName = (name: string) => {
     },
   });
 };
+
+export type UserPermissionKey =
+  | 'question.add'
+  | 'question.edit'
+  | 'question.edit_without_review'
+  | 'question.delete'
+  | 'question.close'
+  | 'question.reopen'
+  | 'question.vote_up'
+  | 'question.vote_down'
+  | 'question.pin'
+  | 'question.unpin'
+  | 'question.hide'
+  | 'question.show'
+  | 'answer.add'
+  | 'answer.edit'
+  | 'answer.edit_without_review'
+  | 'answer.delete'
+  | 'answer.accept'
+  | 'answer.vote_up'
+  | 'answer.vote_down'
+  | 'answer.invite_someone_to_answer'
+  | 'comment.add'
+  | 'comment.edit'
+  | 'comment.delete'
+  | 'comment.vote_up'
+  | 'comment.vote_down'
+  | 'report.add'
+  | 'tag.add'
+  | 'tag.edit'
+  | 'tag.edit_slug_name'
+  | 'tag.edit_without_review'
+  | 'tag.delete, tag.synonym'
+  | 'link.url_limit'
+  | 'vote.detail'
+  | 'answer.audit'
+  | 'question.audit'
+  | 'tag.audit'
+  | 'tag.use_reserved_tag';
+export const useUserPermission = (
+  keys: UserPermissionKey | UserPermissionKey[],
+) => {
+  const apiUrl = '/answer/api/v1/permission';
+  const action = Array.isArray(keys) ? keys.join(',') : keys;
+
+  return useSWR<
+    Partial<
+      Record<
+        UserPermissionKey,
+        {
+          has_permission: boolean;
+          no_permission_tip: string;
+        }
+      >
+    >
+  >([apiUrl, { params: { action } }], request.instance.get);
+};