From d1227300b76991b339ebd3de16339c6757707f03 Mon Sep 17 00:00:00 2001
From: Aries <urchinzhou@gmail.com>
Date: Tue, 15 Oct 2024 12:30:06 +0800
Subject: [PATCH] click tips to enable extended properties (#6900)

Co-authored-by: zhouwenxuan <aries@Mac.local>
---
 frontend/src/components/dir-view-mode/dir-views.js       | 6 +++++-
 .../components/dir-view-mode/extension-prompts/index.css | 1 +
 .../components/dir-view-mode/extension-prompts/index.js  | 9 +++++++--
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/dir-view-mode/dir-views.js b/frontend/src/components/dir-view-mode/dir-views.js
index d1426ba061..388236c523 100644
--- 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
index 1de9d6a1dc..6998e675ef 100644
--- 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
index 6aa72522b4..6f286ab6ac 100644
--- 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