Skip to content

fix: notification adapter modal improvements #230

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Nov 18, 2025
Merged

fix: notification adapter modal improvements #230

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6567a1c
fix: fix notification modal
efekrskl Nov 13, 2025
cd42704
fix: blacklist icon
efekrskl Nov 13, 2025
14a810c
fix: modal sizes
efekrskl Nov 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions ui/src/views/jobs/mutation/JobMutation.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,15 @@ import { useNavigate, useParams } from 'react-router-dom';
import { Divider, Input, Switch, Button, TagInput, Toast, Select } from '@douyinfe/semi-ui';
import './JobMutation.less';
import { SegmentPart } from '../../../components/segment/SegmentPart';
import { IconBell, IconBriefcase, IconPaperclip, IconPlayCircle, IconPlusCircle, IconUser } from '@douyinfe/semi-icons';
import {
IconBell,
IconBriefcase,
IconPaperclip,
IconPlayCircle,
IconPlusCircle,
IconUser,
IconClear,
} from '@douyinfe/semi-icons';

export default function JobMutator() {
const jobs = useSelector((state) => state.jobs.jobs);
Expand Down Expand Up @@ -160,7 +168,7 @@ export default function JobMutator() {
</SegmentPart>
<Divider margin="1rem" />
<SegmentPart
Icon={IconBell}
Icon={IconClear}
name="Blacklist"
helpText="If a listing contains one of these words, it will be filtered out. Type in a word, then hit enter."
>
Expand Down
23 changes: 14 additions & 9 deletions ui/src/views/jobs/mutation/components/notificationAdapter/NotificationAdapterMutator.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { useSelector } from '../../../../../services/state/store';
import { Banner, Button, Form, Modal, Select, Switch } from '@douyinfe/semi-ui';

import './NotificationAdapterMutator.less';
import { useScreenWidth } from '../../../../../hooks/screenWidth.js';

const sortAdapter = (a, b) => {
if (a.name < b.name) {
Expand Down Expand Up @@ -70,6 +71,9 @@ export default function NotificationAdapterMutator({
const [validationMessage, setValidationMessage] = useState(null);
const [successMessage, setSuccessMessage] = useState(null);

const width = useScreenWidth();
const isMobile = width <= 850;

const onSubmit = (doStore) => {
if (doStore) {
const validationResults = validate(selectedAdapter);
Expand Down Expand Up @@ -170,18 +174,19 @@ export default function NotificationAdapterMutator({
<Modal
title="Adding a new Notification Adapter"
visible={visible}
style={{ width: '95%' }}
style={{ width: isMobile ? '95%' : '50rem' }}
onCancel={() => onSubmit(false)}
footer={
<div>
<Button type="secondary" disabled={selectedAdapter == null} style={{ float: 'left' }} onClick={() => onTry()}>
<Button type="secondary" disabled={selectedAdapter == null} style={{ float: 'left' }} onClick={onTry}>
Try
</Button>
<Button type="danger" onClick={() => onSubmit(true)}>
Save
</Button>
<Button type="primary" onClick={() => onSubmit(false)}>
<Button theme="light" type="tertiary" onClick={() => onSubmit(false)}>
Cancel
</Button>
<Button theme="solid" type="primary" onClick={() => onSubmit(true)}>
Save
</Button>
</div>
}
>
Expand All @@ -207,9 +212,9 @@ export default function NotificationAdapterMutator({
)}

<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...
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>

<Select
Expand Down
7 changes: 6 additions & 1 deletion ui/src/views/jobs/mutation/components/provider/ProviderMutator.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { transform } from '../../../../../services/transformer/providerTransform
import { useSelector } from '../../../../../services/state/store';
import { IconLikeHeart } from '@douyinfe/semi-icons';
import './ProviderMutator.less';
import { useScreenWidth } from '../../../../../hooks/screenWidth.js';

const sortProvider = (a, b) => {
if (a.key < b.key) {
Expand All @@ -21,6 +22,10 @@ export default function ProviderMutator({ onVisibilityChanged, visible = false,
const [selectedProvider, setSelectedProvider] = useState(null);
const [providerUrl, setProviderUrl] = useState(null);
const [validationMessage, setValidationMessage] = useState(null);

const width = useScreenWidth();
const isMobile = width <= 850;

const validate = () => {
if (selectedProvider == null || selectedProvider.length === 0 || providerUrl == null || providerUrl.length === 0) {
return 'Please select a provider and copy the browser url into the textfield after configuring your search parameter.';
Expand Down Expand Up @@ -67,7 +72,7 @@ export default function ProviderMutator({ onVisibilityChanged, visible = false,
visible={visible}
onOk={() => onSubmit(true)}
onCancel={() => onSubmit(false)}
style={{ width: '50rem' }}
style={{ width: isMobile ? '95%' : '50rem' }}
okText="Save"
>
{validationMessage != null && (
Expand Down