preparing new settings page

ui/src/App.jsx

@@ -21,6 +21,7 @@ import Navigation from './components/navigation/Navigation.jsx';
 import { Layout } from '@douyinfe/semi-ui';
 import FredyFooter from './components/footer/FredyFooter.jsx';
 import ProcessingTimes from './views/jobs/ProcessingTimes.jsx';
+import ListingManagement from './views/listings/management/ListingManagement.jsx';
 
 export default function FredyApp() {
   const actions = useActions();
@@ -91,6 +92,7 @@ export default function FredyApp() {
               <Route path="/jobs/insights/:jobId" element={<JobInsight />} />
               <Route path="/jobs" element={<Jobs />} />
               <Route path="/listings" element={<Listings />} />
+              <Route path="/listingManagement" element={<ListingManagement />} />
 
               {/* Permission-aware routes */}
               <Route

ui/src/components/navigation/Navigation.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Nav } from '@douyinfe/semi-ui';
-import { IconUser, IconStar, IconSetting, IconTerminal, IconUserSetting } from '@douyinfe/semi-icons';
+import { IconStar, IconSetting, IconTerminal } from '@douyinfe/semi-icons';
 import logoWhite from '../../assets/logo_white.png';
 import Logout from '../logout/Logout.jsx';
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -17,13 +17,20 @@ export default function Navigation({ isAdmin }) {
 
   const items = [
     { itemKey: '/jobs', text: 'Jobs', icon: <IconTerminal /> },
-    { itemKey: '/listings', text: 'Found Listings', icon: <IconStar /> },
+    { itemKey: '/listings', text: 'Listings', icon: <IconStar /> },
   ];
 
   if (isAdmin) {
-    items.push({ itemKey: '/users', text: 'User Management', icon: <IconUser /> });
+    items.push({
-    items.push({ itemKey: '/listingSettings', text: 'Listing Management', icon: <IconSetting /> });
+      itemKey: 'settings',
-    items.push({ itemKey: '/generalSettings', text: 'General Settings', icon: <IconUserSetting /> });
+      text: 'Settings',
+      icon: <IconSetting />,
+      items: [
+        { itemKey: '/users', text: 'User Management' },
+        { itemKey: '/listingManagement', text: 'Listing Management' },
+        { itemKey: '/generalSettings', text: 'General Settings' },
+      ],
+    });
   }
 
   function parsePathName(name) {

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

@@ -23,6 +23,7 @@ import './ListingsTable.less';
 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';
 
 const getColumns = (provider, setProviderFilter, jobs, setJobNameFilter) => {
   return [
@@ -100,9 +101,9 @@ const getColumns = (provider, setProviderFilter, jobs, setJobNameFilter) => {
       },
     },
     {
-      title: 'State',
+      title: 'Active',
       dataIndex: 'is_active',
-      width: 105,
+      width: 110,
       sorter: true,
       filters: [
         {
@@ -236,6 +237,7 @@ export default function ListingsTable() {
   const tableData = useSelector((state) => state.listingsTable);
   const provider = useSelector((state) => state.provider);
   const jobs = useSelector((state) => state.jobs.jobs);
+  const navigate = useNavigate();
 
   const actions = useActions();
   const [page, setPage] = useState(1);
@@ -348,6 +350,14 @@ export default function ListingsTable() {
         placeholder="Search"
         onChange={handleFilterChange}
       />
+      <Button
+        className="listingsTable__setupButton"
+        onClick={() => {
+          navigate('/listingManagement');
+        }}
+      >
+        Setup notification on listing changes
+      </Button>
       <Table
         rowKey="id"
         empty={empty}

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

@@ -11,4 +11,8 @@
   &__toolbar {
     margin-bottom: 1rem;
   }
+
+  &__setupButton {
+    margin-bottom: 1rem;
+  }
 }

ui/src/views/jobs/mutation/components/notificationAdapter/NotificationAdapterMutator.jsx

@@ -53,6 +53,8 @@ function spreadPrefilledAdapterWithValues(prefilled, fields) {
 }
 
 export default function NotificationAdapterMutator({
+  title,
+  description,
   onVisibilityChanged,
   visible = false,
   selected = [],
@@ -168,7 +170,7 @@ export default function NotificationAdapterMutator({
 
   return (
     <Modal
-      title="Adding a new Notification Adapter"
+      title={title != null ? title : 'Adding a new Notification Adapter'}
       visible={visible}
       style={{ width: '95%' }}
       footer={
@@ -206,11 +208,15 @@ export default function NotificationAdapterMutator({
         />
       )}
 
-      <p>
+      {description != null ? (
-        When Fredy found new listings, we like to report them to you. To do so, notification adapter can be configured.{' '}
+        <p>{description}</p>
-        <br />
+      ) : (
-        There are multiple ways how Fredy can send new listings to you. Chose your weapon...
+        <p>
-      </p>
+          When Fredy found new listings, we like to report them to you. To do so, notification adapter can be
+          configured. <br />
+          There are multiple ways how Fredy can send new listings to you. Chose your weapon...
+        </p>
+      )}
 
       <Select
         filter

ui/src/views/listings/Listings.jsx

@@ -3,9 +3,5 @@ import React from 'react';
 import ListingsTable from '../../components/table/listings/ListingsTable.jsx';
 
 export default function Listings() {
-  return (
+  return <ListingsTable />;
-    <div>
-      <ListingsTable />
-    </div>
-  );
 }