Merge pull request #2128 from visuddhinanda/agile

add title in tag selector

dashboard/src/components/tag/TagSelectButton.tsx

@@ -10,6 +10,7 @@ interface IWidget {
   resId?: string;
   resType?: string;
   disabled?: boolean;
+  selectorTitle?: React.ReactNode;
   trigger?: React.ReactNode;
   onSelect?: Function;
   onCreate?: Function;
@@ -20,6 +21,7 @@ const TagSelectButtonWidget = ({
   resId,
   resType,
   disabled = false,
+  selectorTitle,
   trigger,
   onSelect,
   onCreate,
@@ -35,6 +37,7 @@ const TagSelectButtonWidget = ({
 
   return (
     <TagsManager
+      title={selectorTitle}
       studioName={studioName}
       resId={resId}
       resType={resType}

dashboard/src/components/tag/TagsArea.tsx

@@ -11,6 +11,7 @@ interface IWidget {
   max?: number;
   resId?: string;
   resType?: string;
+  selectorTitle?: React.ReactNode;
   onTagClose?: Function;
   onTagClick?: Function;
 }
@@ -19,6 +20,7 @@ const TagsAreaWidget = ({
   max = 5,
   resId,
   resType,
+  selectorTitle,
   onTagClose,
   onTagClick,
 }: IWidget) => {
@@ -27,12 +29,8 @@ const TagsAreaWidget = ({
   const tagMapList = useAppSelector(tagList);
 
   useEffect(() => {
-    if (tagMapList) {
-      const currTags = tagMapList.filter((value) => value.anchor_id === resId);
-      if (currTags) {
-        setTags(currTags);
-      }
-    }
+    const currTags = tagMapList?.filter((value) => value.anchor_id === resId);
+    setTags(currTags);
   }, [resId, tagMapList]);
 
   const currTags = tags?.map((item, id) => {
@@ -61,6 +59,7 @@ const TagsAreaWidget = ({
   return (
     <div style={{ width: "100%", lineHeight: "2em" }}>
       <TagSelectButton
+        selectorTitle={selectorTitle}
         resId={resId}
         resType={resType}
         trigger={<span style={{ cursor: "pointer" }}>{currTags}</span>}

dashboard/src/components/tag/TagsManager.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Modal } from "antd";
+import { Alert, Modal } from "antd";
 
 import TagsOnItem from "./TagsOnItem";
 
@@ -7,6 +7,7 @@ interface IWidget {
   studioName?: string;
   resId?: string;
   resType?: string;
+  title?: React.ReactNode;
   trigger?: React.ReactNode;
   onSelect?: Function;
 }
@@ -14,6 +15,7 @@ const TagsManagerWidget = ({
   studioName,
   resId,
   resType,
+  title,
   trigger,
   onSelect,
 }: IWidget) => {
@@ -43,6 +45,7 @@ const TagsManagerWidget = ({
         destroyOnClose
         footer={false}
       >
+        {title ? <Alert message={title} /> : undefined}
         <TagsOnItem studioName={studioName} resId={resId} resType={resType} />
       </Modal>
     </>

dashboard/src/components/template/Wbw/WbwDetail.tsx

@@ -173,6 +173,7 @@ const WbwDetailWidget = ({
               />
             </Tooltip>
             <TagSelectButton
+              selectorTitle={data.word.value}
               resType="wbw"
               resId={data.uid}
               onOpen={() => {

dashboard/src/components/template/Wbw/WbwPali.tsx

@@ -356,7 +356,13 @@ const WbwPaliWidget = ({
     return (
       <div className="pali_shell" ref={divShell}>
         <div style={{ position: "absolute", marginTop: -24 }}>
-          <TagsArea resId={data.uid} resType="wbw" data={tags} max={1} />
+          <TagsArea
+            resId={data.uid}
+            resType="wbw"
+            selectorTitle={data.word.value}
+            data={tags}
+            max={1}
+          />
         </div>
         <span className="pali_shell_spell">
           {data.grammarId ? (