add extensible properties prompts (#6818)

* add extensible properties prompts

* Update index.css

* fix code format

* update bell svg

---------

Co-authored-by: Michael An <2331806369@qq.com>

frontend/src/assets/icons/bell.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="14px" viewBox="0 0 12 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>bell</title>
+    <path d="M4.63636364,11.8461538 C4.63636364,12.4317308 5.25852273,12.9230769 6,12.9230769 C6.74147727,12.9230769 7.36363636,12.4317308 7.36363636,11.8461538 L8.72727273,11.8461538 C8.72727273,13.0264615 7.49454546,14 6,14 C4.50545454,14 3.27272727,13.0264615 3.27272727,11.8461538 L4.63636364,11.8461538 L4.63636364,11.8461538 Z M6,1.38957813 C5.23190729,1.38948602 4.49524827,1.70744063 3.9521247,2.27347611 C3.40900113,2.83951159 3.10391665,3.60724689 3.10400507,4.40774194 L3.10400507,5.01915632 C3.10400507,6.50148882 2.70800576,7.95429279 1.96067374,9.21464019 L1.86267391,9.3796526 L10.1373261,9.3796526 L10.0396596,9.21464019 C9.29200703,7.95408947 8.89598985,6.50143803 8.89599493,5.01950373 L8.89599493,4.40739454 C8.89599493,3.60695968 8.59087142,2.83931363 8.04775743,2.27335329 C7.50464345,1.70739295 6.76803495,1.38948603 6,1.38957813 Z M1.77067408,4.40774194 C1.7710074,1.973201 3.66400409,0 6,0 C8.33566258,0 10.2293259,1.97320099 10.2293259,4.40774194 L10.2293259,5.01915632 C10.2293259,6.24337469 10.555992,7.44292804 11.1736576,8.48406948 L11.900323,9.70898262 C12.0275043,9.92329585 12.0333744,10.1925765 11.9156632,10.4126881 C11.7979521,10.6327997 11.5751135,10.7692308 11.333324,10.7692308 L0.666676008,10.7692308 C0.424886452,10.7692308 0.202047948,10.6327997 0.0843367662,10.4126881 C-0.0333744158,10.1925765 -0.0275043066,9.92329585 0.099677001,9.70898262 L0.826342385,8.48406948 C1.443874,7.4430681 1.77098566,6.24338372 1.7710074,5.01950373 L1.7710074,4.40739454 L1.77067408,4.40774194 Z" id="形状结合"></path>
+</svg>

frontend/src/components/dir-view-mode/dir-views.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
 import TreeSection from '../tree-section';
 import { MetadataStatusManagementDialog, MetadataTreeView, useMetadata } from '../../metadata';
+import ExtensionPrompts from './extension-prompts';
 
 const DirViews = ({ userPerm, repoID, currentPath, currentRepoInfo }) => {
   const enableMetadataManagement = useMemo(() => {
@@ -44,9 +45,11 @@ const DirViews = ({ userPerm, repoID, currentPath, currentRepoInfo }) => {
         moreOperations={moreOperations}
         moreOperationClick={moreOperationClick}
       >
-        {enableMetadata && Array.isArray(navigation) && navigation.length > 0 && (
+        {!enableMetadata ? (
+          <ExtensionPrompts />
+        ) : Array.isArray(navigation) && navigation.length > 0 ? (
           <MetadataTreeView userPerm={userPerm} currentPath={currentPath} />
-        )}
+        ) : null}
       </TreeSection>
       {showMetadataStatusManagementDialog && (
         <MetadataStatusManagementDialog

frontend/src/components/dir-view-mode/extension-prompts/index.css

@@ -0,0 +1,27 @@
+.extension-prompts-container {
+  display: flex;
+  flex-direction: row;
+  align-items: start;
+  justify-content: center;
+  gap: 4px;
+  height: 100%;
+  width: 100%;
+  padding: 10px;
+  border-radius: 3px;
+  background-color: #f8fafd;
+  font-size: 13px;
+  color: #868e96;
+}
+
+.extension-prompts-container:hover {
+  color: #703719;
+  background-color: #fffbed;
+}
+
+.extension-prompts-container:hover .extension-prompts-icon {
+  fill: #fc6440;
+}
+
+.extension-prompts-content p {
+  margin: 0;
+}

frontend/src/components/dir-view-mode/extension-prompts/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import Icon from '../../icon';
+import { gettext } from '../../../utils/constants';
+
+import './index.css';
+
+const ExtensionPrompts = () => {
+  return (
+    <div
+      className='extension-prompts-container'
+      aria-label={gettext('Extension Prompts')}
+    >
+      <div className='extension-prompts-icon-wrapper'>
+        <Icon
+          symbol={'bell'}
+          className='extension-prompts-icon'
+          aria-label={gettext('Bell Icon')}
+        />
+      </div>
+      <div className='extension-prompts-content'>
+        <p>
+          {gettext('Turn on extensible properties and views to experience a new way of managing files')}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default ExtensionPrompts;