adding features

ui/src/components/navigation/Navigation.jsx

@@ -7,6 +7,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 
 import './Navigate.less';
 import { useScreenWidth } from '../../hooks/screenWidth.js';
+import { useFeature } from '../../hooks/featureHook.js';
 
 export default function Navigation({ isAdmin }) {
   const navigate = useNavigate();
@@ -14,6 +15,7 @@ export default function Navigation({ isAdmin }) {
 
   const width = useScreenWidth();
   const collapsed = width <= 850;
+  const watchlistFeature = useFeature('WATCHLIST_MANAGEMENT') || false;
 
   const items = [
     { itemKey: '/jobs', text: 'Jobs', icon: <IconTerminal /> },
@@ -21,15 +23,19 @@ export default function Navigation({ isAdmin }) {
   ];
 
   if (isAdmin) {
+    const settingsItems = [
+      { itemKey: '/users', text: 'User Management' },
+      { itemKey: '/generalSettings', text: 'General Settings' },
+    ];
+    if (watchlistFeature) {
+      settingsItems.push({ itemKey: '/watchlistManagement', text: 'Watchlist Management' });
+    }
+
     items.push({
       itemKey: 'settings',
       text: 'Settings',
       icon: <IconSetting />,
-      items: [
-        { itemKey: '/users', text: 'User Management' },
-        { itemKey: '/listingManagement', text: 'Listing Management' },
-        { itemKey: '/generalSettings', text: 'General Settings' },
-      ],
+      items: settingsItems,
     });
   }
 

ui/src/components/table/listings/ListingsTable.jsx

@@ -24,6 +24,7 @@ import { format } from '../../../services/time/timeService.js';
 import { IllustrationNoResult, IllustrationNoResultDark } from '@douyinfe/semi-illustrations';
 import { xhrDelete, xhrPost } from '../../../services/xhr.js';
 import { useNavigate } from 'react-router-dom';
+import { useFeature } from '../../../hooks/featureHook.js';
 
 const getColumns = (provider, setProviderFilter, jobs, setJobNameFilter) => {
   return [
@@ -239,6 +240,7 @@ export default function ListingsTable() {
   const jobs = useSelector((state) => state.jobs.jobs);
   const navigate = useNavigate();
 
+  const watchlistFeature = useFeature('WATCHLIST_MANAGEMENT') || false;
   const actions = useActions();
   const [page, setPage] = useState(1);
   const pageSize = 10;
@@ -350,14 +352,16 @@ export default function ListingsTable() {
         placeholder="Search"
         onChange={handleFilterChange}
       />
-      <Button
-        className="listingsTable__setupButton"
-        onClick={() => {
-          navigate('/listingManagement');
-        }}
-      >
-        Setup notification on listing changes
-      </Button>
+      {watchlistFeature && (
+        <Button
+          className="listingsTable__setupButton"
+          onClick={() => {
+            navigate('/watchlistManagement');
+          }}
+        >
+          Setup notifications on watchlist changes
+        </Button>
+      )}
       <Table
         rowKey="id"
         empty={empty}