click tips to enable extended properties (#6900)

Co-authored-by: zhouwenxuan <[email protected]>
haiwen · Oct 15, 2024 · d122730 · d122730
1 parent d89adb2
commit d122730
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/frontend/src/components/dir-view-mode/dir-views.js b/frontend/src/components/dir-view-mode/dir-views.js
@@ -35,6 +35,10 @@ const DirViews = ({ userPerm, repoID, currentPath, currentRepoInfo }) => {
     updateEnableMetadata(value);
   }, [updateEnableMetadata]);
 
+  const onExtendedProperties = useCallback(() => {
+    setShowMetadataStatusManagementDialog(true);
+  }, []);
+
   if (!enableMetadataManagement) return null;
 
   return (
@@ -46,7 +50,7 @@ const DirViews = ({ userPerm, repoID, currentPath, currentRepoInfo }) => {
         moreOperationClick={moreOperationClick}
       >
         {!enableMetadata ? (
-          <ExtensionPrompts />
+          <ExtensionPrompts onExtendedProperties={onExtendedProperties} />
         ) : Array.isArray(navigation) && navigation.length > 0 ? (
           <MetadataTreeView userPerm={userPerm} currentPath={currentPath} />
         ) : null}

diff --git a/frontend/src/components/dir-view-mode/extension-prompts/index.css b/frontend/src/components/dir-view-mode/extension-prompts/index.css
@@ -16,6 +16,7 @@
 .extension-prompts-container:hover {
   color: #703719;
   background-color: #fffbed;
+  cursor: pointer;
 }
 
 .extension-prompts-container:hover .extension-prompts-icon {

diff --git a/frontend/src/components/dir-view-mode/extension-prompts/index.js b/frontend/src/components/dir-view-mode/extension-prompts/index.js
@@ -1,14 +1,19 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import Icon from '../../icon';
 import { gettext } from '../../../utils/constants';
 
 import './index.css';
 
-const ExtensionPrompts = () => {
+const ExtensionPrompts = ({ onExtendedProperties }) => {
+  const handlePromptsClick = useCallback(() => {
+    onExtendedProperties();
+  }, [onExtendedProperties]);
+
   return (
     <div
       className='extension-prompts-container'
       aria-label={gettext('Extension Prompts')}
+      onClick={handlePromptsClick}
     >
       <div className='extension-prompts-icon-wrapper'>
         <Icon