Listing management (#223)

* upgrading dependencies, fixing image placeholder

* improving processing times label and hide when screen width is too low

* aligning run now button

* renaming settings -> general settings

* smaller security and memory improvements

* improving footer

* preparing listing management

* improve filtering for listings

* preparing new settings page

* preparing new settings page

* storing settings in db

* next release version

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 WatchlistManagement from './views/listings/management/WatchlistManagement.jsx';
 
 export default function FredyApp() {
   const actions = useActions();
@@ -34,6 +35,7 @@ export default function FredyApp() {
     async function init() {
       await actions.user.getCurrentUser();
       if (!needsLogin()) {
+        await actions.features.getFeatures();
         await actions.provider.getProvider();
         await actions.jobs.getJobs();
         await actions.jobs.getProcessingTimes();
@@ -91,6 +93,7 @@ export default function FredyApp() {
               <Route path="/jobs/insights/:jobId" element={<JobInsight />} />
               <Route path="/jobs" element={<Jobs />} />
               <Route path="/listings" element={<Listings />} />
+              <Route path="/watchlistManagement" element={<WatchlistManagement />} />
 
               {/* Permission-aware routes */}
               <Route

ui/src/components/navigation/Navigation.jsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { Nav } from '@douyinfe/semi-ui';
-import { IconUser, IconStar, IconSetting, IconTerminal } 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';
 
 import './Navigate.less';
 import { useScreenWidth } from '../../hooks/screenWidth.js';
+import { useFeature } from '../../hooks/featureHook.js';
 
 export default function Navigation({ isAdmin }) {
   const navigate = useNavigate();
@@ -14,15 +15,28 @@ 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 /> },
-    { 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({ itemKey: '/generalSettings', text: 'General Settings', icon: <IconSetting /> });
+    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: settingsItems,
+    });
   }
 
   function parsePathName(name) {
@@ -32,7 +46,7 @@ export default function Navigation({ isAdmin }) {
 
   return (
     <Nav
-      style={{ height: '100%', width: collapsed ? '' : '13rem' }}
+      style={{ height: '100%', width: collapsed ? '' : '13.2rem' }}
       items={items}
       isCollapsed={collapsed}
       selectedKeys={[parsePathName(location.pathname)]}

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

@@ -1,53 +0,0 @@
-import { Card, Checkbox, Descriptions, Divider, Select } from '@douyinfe/semi-ui';
-import React from 'react';
-import { useSelector } from '../../../services/state/store.js';
-import { Typography } from '@douyinfe/semi-ui';
-
-import './ListingsFilter.less';
-
-export default function ListingsFilter({ onWatchListFilter, onActivityFilter, onJobNameFilter, onProviderFilter }) {
-  const jobs = useSelector((state) => state.jobs.jobs);
-  const provider = useSelector((state) => state.provider);
-  const { Title } = Typography;
-  return (
-    <Card className="listingsFilter">
-      <Title heading={6}>Filter by:</Title>
-      <Divider />
-      <br />
-      <Descriptions row>
-        <Descriptions.Item itemKey="Watch List">
-          <Checkbox onChange={(e) => onWatchListFilter(e.target.checked)}>Only Watch List</Checkbox>
-        </Descriptions.Item>
-        <Descriptions.Item itemKey="Activity status">
-          <Checkbox onChange={(e) => onActivityFilter(e.target.checked)}>Only Active Listings</Checkbox>
-        </Descriptions.Item>
-        <Descriptions.Item itemKey="Job Name">
-          <Select showClear placeholder="Select Job to Filter" onChange={(val) => onJobNameFilter(val)}>
-            {jobs != null &&
-              jobs.length > 0 &&
-              jobs.map((job) => {
-                return (
-                  <Select.Option value={job.id} key={job.id}>
-                    {job.name}
-                  </Select.Option>
-                );
-              })}
-          </Select>
-        </Descriptions.Item>
-        <Descriptions.Item itemKey="Provider">
-          <Select showClear placeholder="Select Provider to Filter" onChange={(val) => onProviderFilter(val)}>
-            {provider != null &&
-              provider.length > 0 &&
-              provider.map((prov) => {
-                return (
-                  <Select.Option value={prov.id} key={prov.id}>
-                    {prov.name}
-                  </Select.Option>
-                );
-              })}
-          </Select>
-        </Descriptions.Item>
-      </Descriptions>
-    </Card>
-  );
-}

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

@@ -1,4 +0,0 @@
-.listingsFilter {
-  margin-bottom: 1rem;
-  background: rgb(53, 54, 60);
-}

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

@@ -1,5 +1,18 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import { Table, Popover, Input, Descriptions, Tag, Image, Empty, Button, Toast, Divider } from '@douyinfe/semi-ui';
+import {
+  Table,
+  Popover,
+  Input,
+  Descriptions,
+  Tag,
+  Image,
+  Empty,
+  Button,
+  Toast,
+  Divider,
+  Space,
+  Select,
+} from '@douyinfe/semi-ui';
 import { useActions, useSelector } from '../../../services/state/store.js';
 import { IconClose, IconDelete, IconSearch, IconStar, IconStarStroked, IconTick } from '@douyinfe/semi-icons';
 import * as timeService from '../../../services/time/timeService.js';
@@ -10,166 +23,224 @@ 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 ListingsFilter from './ListingsFilter.jsx';
+import { useNavigate } from 'react-router-dom';
+import { useFeature } from '../../../hooks/featureHook.js';
 
-const columns = [
-  {
-    title: 'Watchlist',
-    width: 110,
-    dataIndex: 'isWatched',
-    sorter: true,
-    render: (id, row) => {
-      return (
-        <div>
-          <Popover
-            style={{
-              padding: '.4rem',
-              color: 'var(--semi-color-white)',
-            }}
-            content={row.isWatched === 1 ? 'Unwatch Listing' : 'Watch Listing'}
-          >
-            <Button
-              icon={
-                row.isWatched === 1 ? (
-                  <IconStar style={{ color: 'rgba(var(--semi-green-5), 1)' }} />
-                ) : (
-                  <IconStarStroked />
-                )
-              }
-              theme="borderless"
-              size="small"
-              onClick={async () => {
-                try {
-                  await xhrPost('/api/listings/watch', { listingId: row.id });
-                  Toast.success(row.isWatched === 1 ? 'Listing removed from Watchlist' : 'Listing added to Watchlist');
-                  row.reloadTable();
-                } catch (e) {
-                  console.error(e);
-                  Toast.error('Failed to operate Watchlist');
-                }
+const getColumns = (provider, setProviderFilter, jobs, setJobNameFilter) => {
+  return [
+    {
+      title: 'Watchlist',
+      width: 133,
+      dataIndex: 'isWatched',
+      sorter: true,
+      filters: [
+        {
+          text: 'Show only watched listings',
+          value: 'watchList',
+        },
+      ],
+      render: (id, row) => {
+        return (
+          <div>
+            <Popover
+              style={{
+                padding: '.4rem',
+                color: 'var(--semi-color-white)',
               }}
-            />
-          </Popover>
-          <Divider layout="vertical" margin="4px" />
-          <Popover
-            style={{
-              padding: '.4rem',
-              color: 'var(--semi-color-white)',
-            }}
-            content="Delete Listing"
-          >
-            <Button
-              icon={<IconDelete />}
-              theme="borderless"
-              size="small"
-              type="danger"
-              onClick={async () => {
-                try {
-                  await xhrDelete('/api/listings/', { ids: [row.id] });
-                  Toast.success('Listing(s) successfully removed');
-                  row.reloadTable();
-                } catch (error) {
-                  Toast.error(error);
+              content={row.isWatched === 1 ? 'Unwatch Listing' : 'Watch Listing'}
+            >
+              <Button
+                icon={
+                  row.isWatched === 1 ? (
+                    <IconStar style={{ color: 'rgba(var(--semi-green-5), 1)' }} />
+                  ) : (
+                    <IconStarStroked />
+                  )
                 }
+                theme="borderless"
+                size="small"
+                onClick={async () => {
+                  try {
+                    await xhrPost('/api/listings/watch', { listingId: row.id });
+                    Toast.success(
+                      row.isWatched === 1 ? 'Listing removed from Watchlist' : 'Listing added to Watchlist',
+                    );
+                    row.reloadTable();
+                  } catch (e) {
+                    console.error(e);
+                    Toast.error('Failed to operate Watchlist');
+                  }
+                }}
+              />
+            </Popover>
+            <Divider layout="vertical" margin="4px" />
+            <Popover
+              style={{
+                padding: '.4rem',
+                color: 'var(--semi-color-white)',
               }}
-            />
-          </Popover>
-        </div>
-      );
+              content="Delete Listing"
+            >
+              <Button
+                icon={<IconDelete />}
+                theme="borderless"
+                size="small"
+                type="danger"
+                onClick={async () => {
+                  try {
+                    await xhrDelete('/api/listings/', { ids: [row.id] });
+                    Toast.success('Listing(s) successfully removed');
+                    row.reloadTable();
+                  } catch (error) {
+                    Toast.error(error);
+                  }
+                }}
+              />
+            </Popover>
+          </div>
+        );
+      },
     },
-  },
-  {
-    title: 'State',
-    dataIndex: 'is_active',
-    width: 84,
-    sorter: true,
-    render: (value) => {
-      return value ? (
-        <div style={{ color: 'rgba(var(--semi-green-6), 1)' }}>
-          <Popover
-            style={{
-              padding: '.4rem',
-              color: 'var(--semi-color-white)',
-            }}
-            content="Listing is still active"
-          >
-            <IconTick />
-          </Popover>
-        </div>
-      ) : (
-        <div style={{ color: 'rgba(var(--semi-red-5), 1)' }}>
-          <Popover
-            style={{
-              padding: '.4rem',
-              color: 'var(--semi-color-white)',
-            }}
-            content="Listing is inactive"
-          >
-            <IconClose />
-          </Popover>
-        </div>
-      );
+    {
+      title: 'Active',
+      dataIndex: 'is_active',
+      width: 110,
+      sorter: true,
+      filters: [
+        {
+          text: 'Show only active listings',
+          value: 'activityStatus',
+        },
+      ],
+      render: (value) => {
+        return value ? (
+          <div style={{ color: 'rgba(var(--semi-green-6), 1)' }}>
+            <Popover
+              style={{
+                padding: '.4rem',
+                color: 'var(--semi-color-white)',
+              }}
+              content="Listing is still active"
+            >
+              <IconTick />
+            </Popover>
+          </div>
+        ) : (
+          <div style={{ color: 'rgba(var(--semi-red-5), 1)' }}>
+            <Popover
+              style={{
+                padding: '.4rem',
+                color: 'var(--semi-color-white)',
+              }}
+              content="Listing is inactive"
+            >
+              <IconClose />
+            </Popover>
+          </div>
+        );
+      },
     },
-  },
-  {
-    title: 'Job-Name',
-    sorter: true,
-    ellipsis: true,
-    dataIndex: 'job_name',
-    width: 150,
-  },
-  {
-    title: 'Listing date',
-    width: 130,
-    dataIndex: 'created_at',
-    sorter: true,
-    render: (text) => timeService.format(text, false),
-  },
-  {
-    title: 'Provider',
-    width: 130,
-    dataIndex: 'provider',
-    sorter: true,
-    render: (text) => text.charAt(0).toUpperCase() + text.slice(1),
-  },
-  {
-    title: 'Price',
-    width: 110,
-    dataIndex: 'price',
-    sorter: true,
-    render: (text) => text + ' €',
-  },
-  {
-    title: 'Address',
-    width: 150,
-    dataIndex: 'address',
-    sorter: true,
-  },
-  {
-    title: 'Title',
-    dataIndex: 'title',
-    sorter: true,
-    ellipsis: true,
-    render: (text, row) => {
-      return (
-        <a href={row.url} target="_blank" rel="noopener noreferrer">
-          {text}
-        </a>
-      );
+    {
+      title: 'Job-Name',
+      sorter: true,
+      ellipsis: true,
+      dataIndex: 'job_name',
+      width: 150,
+      onFilter: () => true,
+      renderFilterDropdown: () => {
+        return (
+          <Space vertical style={{ padding: 8 }}>
+            <Select showClear placeholder="Select Job to Filter" onChange={(val) => setJobNameFilter(val)}>
+              {jobs != null &&
+                jobs.length > 0 &&
+                jobs.map((job) => {
+                  return (
+                    <Select.Option value={job.id} key={job.id}>
+                      {job.name}
+                    </Select.Option>
+                  );
+                })}
+            </Select>
+          </Space>
+        );
+      },
     },
-  },
-];
+    {
+      title: 'Listing date',
+      width: 130,
+      dataIndex: 'created_at',
+      sorter: true,
+      render: (text) => timeService.format(text, false),
+    },
+    {
+      title: 'Provider',
+      width: 130,
+      dataIndex: 'provider',
+      sorter: true,
+      render: (text) => text.charAt(0).toUpperCase() + text.slice(1),
+      onFilter: () => true,
+      renderFilterDropdown: () => {
+        return (
+          <Space vertical style={{ padding: 8 }}>
+            <Select showClear placeholder="Select Provider to Filter" onChange={(val) => setProviderFilter(val)}>
+              {provider != null &&
+                provider.length > 0 &&
+                provider.map((prov) => {
+                  return (
+                    <Select.Option value={prov.id} key={prov.id}>
+                      {prov.name}
+                    </Select.Option>
+                  );
+                })}
+            </Select>
+          </Space>
+        );
+      },
+    },
+    {
+      title: 'Price',
+      width: 110,
+      dataIndex: 'price',
+      sorter: true,
+      render: (text) => text + ' €',
+    },
+    {
+      title: 'Address',
+      width: 150,
+      dataIndex: 'address',
+      sorter: true,
+    },
+    {
+      title: 'Title',
+      dataIndex: 'title',
+      sorter: true,
+      ellipsis: true,
+      render: (text, row) => {
+        return (
+          <a href={row.url} target="_blank" rel="noopener noreferrer">
+            {text}
+          </a>
+        );
+      },
+    },
+  ];
+};
 
 const empty = (
   <Empty
     image={<IllustrationNoResult />}
     darkModeImage={<IllustrationNoResultDark />}
-    description="No listings available."
+    description="No listings found."
   />
 );
 
 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 watchlistFeature = useFeature('WATCHLIST_MANAGEMENT') || false;
   const actions = useActions();
   const [page, setPage] = useState(1);
   const pageSize = 10;
@@ -179,12 +250,14 @@ export default function ListingsTable() {
   const [jobNameFilter, setJobNameFilter] = useState(null);
   const [activityFilter, setActivityFilter] = useState(null);
   const [providerFilter, setProviderFilter] = useState(null);
+  const [allFilters, setAllFilters] = useState([]);
 
   const [imageWidth, setImageWidth] = useState('100%');
   const handlePageChange = (_page) => {
     setPage(_page);
   };
 
+  const columns = getColumns(provider, setProviderFilter, jobs, setJobNameFilter);
   const loadTable = () => {
     let sortfield = null;
     let sortdir = null;
@@ -209,6 +282,20 @@ export default function ListingsTable() {
 
   const handleFilterChange = useMemo(() => debounce((value) => setFreeTextFilter(value), 500), []);
 
+  const diffArrays = (primary, secondary) => {
+    const result = {};
+
+    for (const item of secondary) {
+      if (!primary.includes(item)) result[item] = true;
+    }
+
+    for (const item of primary) {
+      if (!secondary.includes(item)) result[item] = false;
+    }
+
+    return [result];
+  };
+
   useEffect(() => {
     return () => {
       // cleanup debounced handler to avoid memory leaks
@@ -258,12 +345,6 @@ export default function ListingsTable() {
 
   return (
     <div>
-      <ListingsFilter
-        onActivityFilter={setActivityFilter}
-        onWatchListFilter={setWatchListFilter}
-        onJobNameFilter={setJobNameFilter}
-        onProviderFilter={setProviderFilter}
-      />
       <Input
         prefix={<IconSearch />}
         showClear
@@ -271,6 +352,16 @@ export default function ListingsTable() {
         placeholder="Search"
         onChange={handleFilterChange}
       />
+      {watchlistFeature && (
+        <Button
+          className="listingsTable__setupButton"
+          onClick={() => {
+            navigate('/watchlistManagement');
+          }}
+        >
+          Setup notifications on watchlist changes
+        </Button>
+      )}
       <Table
         rowKey="id"
         empty={empty}
@@ -285,7 +376,23 @@ export default function ListingsTable() {
           };
         })}
         onChange={(changeSet) => {
-          if (changeSet?.extra?.changeType === 'sorter') {
+          if (changeSet?.extra?.changeType === 'filter') {
+            const transformed = changeSet.filters.map((f) => f.dataIndex);
+            const diff = diffArrays(allFilters, transformed);
+            setAllFilters(transformed);
+            diff.forEach((filter) => {
+              switch (Object.keys(filter)[0]) {
+                case 'isWatched':
+                  setWatchListFilter(Object.values(filter)[0]);
+                  break;
+                case 'is_active':
+                  setActivityFilter(Object.values(filter)[0]);
+                  break;
+                default:
+                  console.error('Unknown filter: ', filter.dataIndex);
+              }
+            });
+          } else if (changeSet?.extra?.changeType === 'sorter') {
             setSortData({
               field: changeSet.sorter.dataIndex,
               direction: changeSet.sorter.sortOrder === 'ascend' ? 'asc' : 'desc',

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

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

ui/src/hooks/featureHook.js

@@ -0,0 +1,15 @@
+import { useSelector } from '../services/state/store.js';
+
+export function useFeature(name) {
+  const currentFeatureFlags = useSelector((state) => state.features);
+  if (Object.keys(currentFeatureFlags || {}).length === 0) {
+    return null;
+  }
+
+  if (currentFeatureFlags[name] == null) {
+    console.warn(`Feature flag with name ${name} is unknown.`);
+    return null;
+  }
+
+  return currentFeatureFlags[name];
+}

ui/src/services/state/store.js

@@ -48,6 +48,16 @@ export const useFredyState = create(
             }
           },
         },
+        features: {
+          async getFeatures() {
+            try {
+              const response = await xhrGet('/api/features');
+              set((state) => ({ ...state.features, ...response.json }));
+            } catch (Exception) {
+              console.error('Error while trying to get resource for api/features. Error:', Exception);
+            }
+          },
+        },
         provider: {
           async getProvider() {
             try {
@@ -176,6 +186,7 @@ export const useFredyState = create(
           page: 1,
           result: [],
         },
+        features: {},
         generalSettings: { settings: {} },
         demoMode: { demoMode: false },
         versionUpdate: {},
@@ -192,6 +203,7 @@ export const useFredyState = create(
         versionUpdate: { ...effects.versionUpdate },
         listingsTable: { ...effects.listingsTable },
         provider: { ...effects.provider },
+        features: { ...effects.features },
         jobs: { ...effects.jobs },
         user: { ...effects.user },
       };

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

@@ -54,6 +54,8 @@ function spreadPrefilledAdapterWithValues(prefilled, fields) {
 }
 
 export default function NotificationAdapterMutator({
+  title,
+  description,
   onVisibilityChanged,
   visible = false,
   selected = [],
@@ -172,7 +174,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: isMobile ? '95%' : '50rem' }}
       onCancel={() => onSubmit(false)}
@@ -211,11 +213,15 @@ export default function NotificationAdapterMutator({
         />
       )}
 
-      <p>
-        When Fredy finds new listings, we like to report them to you. To do so, the notification adapter can be
-        configured. <br />
-        There are multiple ways Fredy can send new listings to you. Choose your weapon...
-      </p>
+      {description != null ? (
+        <p>{description}</p>
+      ) : (
+        <p>
+          When Fredy finds 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 (
-    <div>
-      <ListingsTable />
-    </div>
-  );
+  return <ListingsTable />;
 }

ui/src/views/listings/management/WatchlistManagement.jsx

@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import { IconHorn } from '@douyinfe/semi-icons';
+import { SegmentPart } from '../../../components/segment/SegmentPart.jsx';
+import { Banner, Button, Checkbox, Space } from '@douyinfe/semi-ui';
+import NotificationAdapterMutator from '../../jobs/mutation/components/notificationAdapter/NotificationAdapterMutator.jsx';
+import Headline from '../../../components/headline/Headline.jsx';
+
+export default function WatchlistManagement() {
+  const [notificationChooserVisible, setNotificationChooserVisible] = useState(false);
+  const [notificationAdapterData, setNotificationAdapterData] = useState([]);
+  //TODO: Set default
+  const [activityChanges, setActivityChanges] = useState(false);
+  const [priceChanges, setPriceChanges] = useState(false);
+  return (
+    <div>
+      <SegmentPart
+        name="Notification for Watch List"
+        helpText="You can get notified for changes on listings from your watch list."
+        Icon={IconHorn}
+      >
+        <Banner
+          fullMode={false}
+          type="info"
+          closeIcon={null}
+          title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>Note</div>}
+          description="You’ll receive notifications only for listings that are on your watch list. To add listings to it, open the 'Listings' section and tag the ones you want to follow."
+        />
+        <Space />
+        <Headline size={5} text="Notify me when:" style={{ marginTop: '1rem' }} />
+
+        <Checkbox checked={activityChanges} onChange={(e) => setActivityChanges(e.target.checked)}>
+          Listing state changes (e.g. listing becomes inactive)
+        </Checkbox>
+        <Checkbox checked={priceChanges} onChange={(e) => setPriceChanges(e.target.checked)}>
+          Listing price changes
+        </Checkbox>
+
+        <Space />
+        <Headline size={5} text="Notify me with:" style={{ marginTop: '1rem' }} />
+        <Button onClick={() => setNotificationChooserVisible(true)}>Select notification method</Button>
+
+        <NotificationAdapterMutator
+          title="Add notification method"
+          description="When something has changed, Fredy will notify you using the selected notification adapter. Note, some adapter like SqLite are not available here."
+          visible={notificationChooserVisible}
+          onVisibilityChanged={(visible) => {
+            setNotificationChooserVisible(visible);
+          }}
+          selected={notificationAdapterData}
+          editNotificationAdapter={null}
+          onData={(data) => {
+            const oldData = [...notificationAdapterData].filter((o) => o.id !== data.id);
+            setNotificationAdapterData([...oldData, data]);
+          }}
+        />
+      </SegmentPart>
+    </div>
+  );
+}