From 26cdff0f298c0622516b2d932c0b80fa91d326cf Mon Sep 17 00:00:00 2001
From: Jerry Ren <rj.aiyayao@gmail.com>
Date: Thu, 19 Sep 2024 20:24:46 +0800
Subject: [PATCH] refactor(metadata): add tips (#6801)

---
 frontend/src/metadata/utils/column/index.js   |  4 ++++
 .../cell/dropdown-menu/index.js               | 19 ++++++++++++-------
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/frontend/src/metadata/utils/column/index.js b/frontend/src/metadata/utils/column/index.js
index 47b09e9b7a4..5969f3b8995 100644
--- a/frontend/src/metadata/utils/column/index.js
+++ b/frontend/src/metadata/utils/column/index.js
@@ -207,6 +207,10 @@ export const getColumnDisplayName = (key, name) => {
   }
 };
 
+export const checkIsPrivateColumn = (column) => {
+  return PRIVATE_COLUMN_KEYS.includes(column.key);
+};
+
 export const getColumnOriginName = (column) => {
   const { key, name } = column;
   if (PRIVATE_COLUMN_KEYS.includes(key)) return key;
diff --git a/frontend/src/metadata/views/table/table-main/records-header/cell/dropdown-menu/index.js b/frontend/src/metadata/views/table/table-main/records-header/cell/dropdown-menu/index.js
index 5f40649a14d..f46d327f3ad 100644
--- a/frontend/src/metadata/views/table/table-main/records-header/cell/dropdown-menu/index.js
+++ b/frontend/src/metadata/views/table/table-main/records-header/cell/dropdown-menu/index.js
@@ -7,6 +7,7 @@ import { RenamePopover, OptionsPopover } from '../../../../../../components/popo
 import DropdownItem from './dropdown-item';
 import { gettext } from '../../../../../../../utils/constants';
 import { isMobile } from '../../../../../../../utils/utils';
+import { checkIsPrivateColumn } from '../../../../../../utils/column';
 import { getDateDisplayString } from '../../../../../../utils/cell';
 import { CellType, DEFAULT_DATE_FORMAT, SORT_COLUMN_OPTIONS, SHOW_DISABLED_SORT_COLUMNS, SORT_TYPE, EVENT_BUS_TYPE } from '../../../../../../constants';
 
@@ -20,6 +21,10 @@ const HeaderDropdownMenu = ({ column, view, renameColumn, modifyColumnData, dele
   const [isRenamePopoverShow, setRenamePopoverShow] = useState(false);
   const [isOptionPopoverShow, setOptionPopoverShow] = useState(false);
 
+  const isPrivateColumn = useMemo(() => {
+    return checkIsPrivateColumn(column);
+  }, [column]);
+
   const today = useMemo(() => {
     let todayDate = new Date();
     let year = todayDate.getFullYear();
@@ -107,7 +112,7 @@ const HeaderDropdownMenu = ({ column, view, renameColumn, modifyColumnData, dele
           disabled={true}
           target="sf-metadata-edit-column-format"
           title={gettext('Edit format settings')}
-          tip={gettext('You do not have permission')}
+          tip={isPrivateColumn ? gettext('This property is not editable') : gettext('You do not have permission')}
           iconName="set-up"
         />
       );
@@ -197,7 +202,7 @@ const HeaderDropdownMenu = ({ column, view, renameColumn, modifyColumnData, dele
                 target="sf-metadata-edit-column-options"
                 iconName="single-select"
                 title={gettext('Edit single select')}
-                tip={gettext('You do not have permission')}
+                tip={isPrivateColumn ? gettext('This property is not editable') : gettext('You do not have permission')}
                 onChange={openOptionPopover}
               />
               {/* <DropdownItem
@@ -216,14 +221,14 @@ const HeaderDropdownMenu = ({ column, view, renameColumn, modifyColumnData, dele
               target="sf-metadata-edit-column-options"
               iconName="multiple-select"
               title={gettext('Edit multiple select')}
-              tip={gettext('You do not have permission')}
+              tip={isPrivateColumn ? gettext('This property is not editable') : gettext('You do not have permission')}
               onChange={openOptionPopover}
             />
           )}
           {/* {type === CellType.NUMBER && (
             TODO:
             <DropdownItem
-              disabled={canModifyColumnData}
+              disabled={!canModifyColumnData}
               target="sf-metadata-edit-column-format"
               iconName="set-up"
               title={gettext('Edit format settings')}
@@ -241,7 +246,7 @@ const HeaderDropdownMenu = ({ column, view, renameColumn, modifyColumnData, dele
             target="sf-metadata-rename-column"
             iconName="rename"
             title={gettext('Rename property')}
-            tip={gettext('You do not have permission')}
+            tip={isPrivateColumn ? gettext('This property is not editable') : gettext('You do not have permission')}
             onChange={openRenamePopover}
             onMouseEnter={hideSubMenu}
           />
@@ -272,14 +277,14 @@ const HeaderDropdownMenu = ({ column, view, renameColumn, modifyColumnData, dele
             target="sf-metadata-delete-column"
             iconName="delete"
             title={gettext('Delete property')}
-            tip={gettext('You do not have permission')}
+            tip={isPrivateColumn ? gettext('This property can not be deleted') : gettext('You do not have permission')}
             onChange={onDelete}
             onMouseEnter={hideSubMenu}
           />
         </div>
       </DropdownMenu>
     );
-  }, [column, openRenamePopover, hideSubMenu, renderDateFormat, openOptionPopover, menuRef, dropdownDomRef, modifySort, onDelete]);
+  }, [column, openRenamePopover, hideSubMenu, renderDateFormat, openOptionPopover, menuRef, dropdownDomRef, modifySort, onDelete, isPrivateColumn]);
 
   return (
     <>