ability to share jobs with users

ui/src/App.jsx

@@ -37,6 +37,7 @@ export default function FredyApp() {
         await actions.provider.getProvider();
         await actions.jobs.getJobs();
         await actions.jobs.getProcessingTimes();
+        await actions.jobs.getSharableUserList();
         await actions.notificationAdapter.getAdapter();
         await actions.generalSettings.getGeneralSettings();
         await actions.versionUpdate.getVersionUpdate();

ui/src/components/table/JobTable.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Button, Empty, Table, Switch, Popover } from '@douyinfe/semi-ui';
-import { IconDelete, IconDescend2, IconEdit, IconHistogram } from '@douyinfe/semi-icons';
+import { IconAlertTriangle, IconDelete, IconDescend2, IconEdit, IconHistogram } from '@douyinfe/semi-icons';
 import { IllustrationNoResult, IllustrationNoResultDark } from '@douyinfe/semi-illustrations';
 
 import './JobTable.less';
@@ -33,12 +33,38 @@ export default function JobTable({
           title: '',
           dataIndex: '',
           render: (job) => {
-            return <Switch onChange={(checked) => onJobStatusChanged(job.id, checked)} checked={job.enabled} />;
+            return (
+              <Switch
+                onChange={(checked) => onJobStatusChanged(job.id, checked)}
+                checked={job.enabled}
+                disabled={job.isOnlyShared}
+              />
+            );
           },
         },
         {
           title: 'Name',
           dataIndex: 'name',
+          render: (name, job) => {
+            if (job.isOnlyShared) {
+              return (
+                <Popover
+                  content={getPopoverContent(
+                    'This job has been shared with you by another user, therefor it is read-only.',
+                  )}
+                >
+                  <div style={{ display: 'flex', gap: '.3rem' }}>
+                    <div style={{ color: 'rgba(var(--semi-yellow-7), 1)' }}>
+                      <IconAlertTriangle />
+                    </div>
+                    {name}
+                  </div>
+                </Popover>
+              );
+            } else {
+              return name;
+            }
+          },
         },
         {
           title: 'Listings',
@@ -48,14 +74,14 @@ export default function JobTable({
           },
         },
         {
-          title: 'Providers',
+          title: 'Provider',
           dataIndex: 'provider',
           render: (value) => {
             return value.length || 0;
           },
         },
         {
-          title: 'Notification adapters',
+          title: 'Notification Adapter',
           dataIndex: 'notificationAdapter',
           render: (value) => {
             return value.length || 0;
@@ -68,16 +94,36 @@ export default function JobTable({
             return (
               <div className="interactions">
                 <Popover content={getPopoverContent('Job Insights')}>
-                  <Button type="primary" icon={<IconHistogram />} onClick={() => onJobInsight(job.id)} />
+                  <Button
+                    type="primary"
+                    icon={<IconHistogram />}
+                    disabled={job.isOnlyShared}
+                    onClick={() => onJobInsight(job.id)}
+                  />
                 </Popover>
                 <Popover content={getPopoverContent('Edit a Job')}>
-                  <Button type="secondary" icon={<IconEdit />} onClick={() => onJobEdit(job.id)} />
+                  <Button
+                    type="secondary"
+                    icon={<IconEdit />}
+                    disabled={job.isOnlyShared}
+                    onClick={() => onJobEdit(job.id)}
+                  />
                 </Popover>
                 <Popover content={getPopoverContent('Delete all found Listings of this Job')}>
-                  <Button type="danger" icon={<IconDescend2 />} onClick={() => onListingRemoval(job.id)} />
+                  <Button
+                    type="danger"
+                    icon={<IconDescend2 />}
+                    disabled={job.isOnlyShared}
+                    onClick={() => onListingRemoval(job.id)}
+                  />
                 </Popover>
                 <Popover content={getPopoverContent('Delete Job')}>
-                  <Button type="danger" icon={<IconDelete />} onClick={() => onJobRemoval(job.id)} />
+                  <Button
+                    type="danger"
+                    icon={<IconDelete />}
+                    disabled={job.isOnlyShared}
+                    onClick={() => onJobRemoval(job.id)}
+                  />
                 </Popover>
               </div>
             );

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

@@ -26,7 +26,11 @@ export default function ListingsFilter({ onWatchListFilter, onActivityFilter, on
             {jobs != null &&
               jobs.length > 0 &&
               jobs.map((job) => {
-                return <Select.Option value={job.id}>{job.name}</Select.Option>;
+                return (
+                  <Select.Option value={job.id} key={job.id}>
+                    {job.name}
+                  </Select.Option>
+                );
               })}
           </Select>
         </Descriptions.Item>
@@ -35,7 +39,11 @@ export default function ListingsFilter({ onWatchListFilter, onActivityFilter, on
             {provider != null &&
               provider.length > 0 &&
               provider.map((prov) => {
-                return <Select.Option value={prov.id}>{prov.name}</Select.Option>;
+                return (
+                  <Select.Option value={prov.id} key={prov.id}>
+                    {prov.name}
+                  </Select.Option>
+                );
               })}
           </Select>
         </Descriptions.Item>

ui/src/services/state/store.js

@@ -67,6 +67,14 @@ export const useFredyState = create(
               console.error(`Error while trying to get resource for api/jobs. Error:`, Exception);
             }
           },
+          async getSharableUserList() {
+            try {
+              const response = await xhrGet('/api/jobs/shareableUserList');
+              set((state) => ({ jobs: { ...state.jobs, shareableUserList: Object.freeze(response.json) } }));
+            } catch (Exception) {
+              console.error(`Error while trying to get resource for api/jobs. Error:`, Exception);
+            }
+          },
           async getProcessingTimes() {
             try {
               const response = await xhrGet('/api/jobs/processingTimes');
@@ -172,7 +180,7 @@ export const useFredyState = create(
         demoMode: { demoMode: false },
         versionUpdate: {},
         provider: [],
-        jobs: { jobs: [], insights: {}, processingTimes: {} },
+        jobs: { jobs: [], insights: {}, processingTimes: {}, shareableUserList: [] },
         user: { users: [], currentUser: null },
       };
 

ui/src/views/jobs/mutation/JobMutation.jsx

@@ -8,13 +8,14 @@ import Headline from '../../../components/headline/Headline';
 import { useActions, useSelector } from '../../../services/state/store';
 import { xhrPost } from '../../../services/xhr';
 import { useNavigate, useParams } from 'react-router-dom';
-import { Divider, Input, Switch, Button, TagInput, Toast } from '@douyinfe/semi-ui';
+import { Divider, Input, Switch, Button, TagInput, Toast, Select } from '@douyinfe/semi-ui';
 import './JobMutation.less';
 import { SegmentPart } from '../../../components/segment/SegmentPart';
-import { IconPlusCircle } from '@douyinfe/semi-icons';
+import { IconBell, IconBriefcase, IconPaperclip, IconPlayCircle, IconPlusCircle, IconUser } from '@douyinfe/semi-icons';
 
 export default function JobMutator() {
   const jobs = useSelector((state) => state.jobs.jobs);
+  const shareableUserList = useSelector((state) => state.jobs.shareableUserList);
   const params = useParams();
 
   const jobToBeEdit = params.jobId == null ? null : jobs.find((job) => job.id === params.jobId);
@@ -32,6 +33,7 @@ export default function JobMutator() {
   const [name, setName] = useState(defaultName);
   const [blacklist, setBlacklist] = useState(defaultBlacklist);
   const [notificationAdapterData, setNotificationAdapterData] = useState(defaultNotificationAdapter);
+  const [shareWithUsers, setShareWithUsers] = useState(jobToBeEdit?.shared_with_user ?? []);
   const [enabled, setEnabled] = useState(defaultEnabled);
   const navigate = useNavigate();
   const actions = useActions();
@@ -45,6 +47,7 @@ export default function JobMutator() {
       await xhrPost('/api/jobs', {
         provider: providerData,
         notificationAdapter: notificationAdapterData,
+        shareWithUsers,
         name,
         blacklist,
         enabled,
@@ -91,7 +94,7 @@ export default function JobMutator() {
 
       <Headline text={jobToBeEdit ? 'Edit Job' : 'Create new Job'} />
       <form>
-        <SegmentPart name="Name">
+        <SegmentPart name="Name" Icon={IconPaperclip}>
           <Input
             autoFocus
             type="text"
@@ -105,7 +108,7 @@ export default function JobMutator() {
         <Divider margin="1rem" />
         <SegmentPart
           name="Providers"
-          icon="briefcase"
+          Icon={IconBriefcase}
           helpText={`
             A provider is essentially the service (e.g. ImmoScout24, Kleinanzeigen) that Fredy searches for new listings.
             Fredy will open a new tab pointing to the website of this provider. You have to adjust your search parameter
@@ -130,7 +133,7 @@ export default function JobMutator() {
         </SegmentPart>
         <Divider margin="1rem" />
         <SegmentPart
-          icon="bell"
+          Icon={IconBell}
           name="Notification Adapters"
           helpText="Fredy supports multiple ways to notify you about new findings. These are called notification adapter. You can chose between email, Telegram etc."
         >
@@ -157,7 +160,7 @@ export default function JobMutator() {
         </SegmentPart>
         <Divider margin="1rem" />
         <SegmentPart
-          icon="bell"
+          Icon={IconBell}
           name="Blacklist"
           helpText="If a listing contains one of these words, it will be filtered out. Type in a word, then hit enter."
         >
@@ -169,7 +172,32 @@ export default function JobMutator() {
         </SegmentPart>
         <Divider margin="1rem" />
         <SegmentPart
-          icon="play circle outline"
+          Icon={IconUser}
+          name="Sharing with user"
+          helpText="You can share this job with other users. They will be able to see the listings, but only (as the creator) you can edit the job. Admins are filtered from this list as they have access to everything."
+        >
+          {shareableUserList.length === 0 ? (
+            <div>No users found to share this Job to. Please create additional non-admin user.</div>
+          ) : (
+            <Select
+              filter
+              multiple
+              placeholder="Search user"
+              autoClearSearchValue={false}
+              defaultValue={shareWithUsers}
+              onChange={(value) => setShareWithUsers(value)}
+            >
+              {shareableUserList.map((user) => (
+                <Select.Option value={user.id} key={user.id}>
+                  {user.name}
+                </Select.Option>
+              ))}
+            </Select>
+          )}
+        </SegmentPart>
+        <Divider margin="1rem" />
+        <SegmentPart
+          Icon={IconPlayCircle}
           name="Job activation"
           helpText="Whether or not the job is activated. Inactive jobs will be ignored when Fredy checks for new listings."
         >