feat(feeds): add force run (#1243)

* feat(feeds): add force run

* fix: simplify ForceRun

* add confirmation modal

* handle errors by using the test func

* require user input to run

* make sure to reschedule next job after forcerun

* refactor modal centering with grid

* refactor: Simplify startJob and forceRun logic

- Refactor `startJob` to accept a `runImmediately` flag. This flag controls whether the job should be run immediately or scheduled for later. This change simplifies the `ForceRun` function by allowing it to call `startJob` with `runImmediately` set to `true`.

- Remove redundant checks in `ForceRun` related to feed type. These checks are handled in `startJob`.

BREAKING CHANGE: The `startJob` function now requires a second argument, `runImmediately`. This change affects all calls to `startJob`.

* fix(web) Invalidate queries after forceRun

* refactor(feeds): init and test run

---------

Co-authored-by: ze0s <43699394+zze0s@users.noreply.github.com>

web/src/api/APIClient.ts

@@ -224,6 +224,7 @@ export const APIClient = {
     update: (feed: Feed) => appClient.Put(`api/feeds/${feed.id}`, {
       body: feed
     }),
+    forceRun: (id: number) => appClient.Post(`api/feeds/${id}/forcerun`),
     delete: (id: number) => appClient.Delete(`api/feeds/${id}`),
     deleteCache: (id: number) => appClient.Delete(`api/feeds/${id}/cache`),
     test: (feed: Feed) => appClient.Post("api/feeds/test", {

web/src/components/modals/index.tsx

@@ -3,7 +3,8 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
-import { FC, Fragment, MutableRefObject } from "react";
+
+import { FC, Fragment, MutableRefObject, useState } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/solid";
 
@@ -18,13 +19,24 @@ interface ModalLowerProps {
   isOpen: boolean;
   isLoading: boolean;
   toggle: () => void;
-  deleteAction: () => void;
+  deleteAction?: () => void;
+  forceRunAction?: () => void;
 }
 
 interface DeleteModalProps extends ModalUpperProps, ModalLowerProps {
   buttonRef: MutableRefObject<HTMLElement | null> | undefined;
 }
 
+interface ForceRunModalProps {
+  isOpen: boolean;
+  isLoading: boolean;
+  toggle: () => void;
+  buttonRef: MutableRefObject<HTMLElement | null> | undefined;
+  forceRunAction: () => void;
+  title: string;
+  text: string;
+}
+
 const ModalUpper = ({ title, text }: ModalUpperProps) => (
   <div className="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
     <div className="sm:flex sm:items-start">
@@ -55,7 +67,7 @@ const ModalLower = ({ isOpen, isLoading, toggle, deleteAction }: ModalLowerProps
           onClick={(e) => {
             e.preventDefault();
             if (isOpen) {
-              deleteAction();
+              deleteAction?.();
               toggle();
             }
           }}
@@ -121,3 +133,116 @@ export const DeleteModal: FC<DeleteModalProps> = (props: DeleteModalProps) => (
     </Dialog>
   </Transition.Root>
 );
+
+export const ForceRunModal: FC<ForceRunModalProps> = (props: ForceRunModalProps) => {
+  const [inputValue, setInputValue] = useState("");
+  const isInputCorrect = inputValue.trim().toLowerCase() === "i understand";
+
+  // A function to reset the input and handle any necessary cleanup
+  const resetAndClose = () => {
+    setInputValue("");
+    props.toggle();
+  };
+
+  // The handleClose function will be passed to the onClose prop of the Dialog
+  const handleClose = () => {
+    setTimeout(() => {
+      resetAndClose();
+    }, 200);
+  };
+
+  const handleForceRun = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (props.isOpen && isInputCorrect) {
+      props.forceRunAction();
+      props.toggle();
+      // Delay the reset of the input until after the transition finishes
+      setTimeout(() => {
+        setInputValue("");
+      }, 400);
+    }
+  };
+  
+  // When the 'Cancel' button is clicked
+  const handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    resetAndClose();
+  };
+
+  return (
+    <Transition.Root show={props.isOpen} as={Fragment}>
+      <Dialog
+        as="div"
+        static
+        className="fixed z-10 inset-0 overflow-y-auto"
+        initialFocus={props.buttonRef}
+        open={props.isOpen}
+        onClose={handleClose}
+      >
+        <div className="grid place-items-center min-h-screen">
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Dialog.Overlay className="fixed inset-0 bg-gray-700/60 dark:bg-black/60 transition-opacity" />
+          </Transition.Child>
+
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enterTo="opacity-100 translate-y-0 sm:scale-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          >
+            <div className="inline-block align-bottom border border-transparent dark:border-gray-700 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+              <ModalUpper title={props.title} text={props.text} />
+              
+              <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 sm:px-6 flex justify-center">
+                <input
+                  type="text"
+                  className="w-96 shadow-sm sm:text-sm rounded-md border py-2.5 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-400 dark:border-gray-700 bg-gray-100 dark:bg-gray-900 dark:text-gray-100"
+                  placeholder="Type 'I understand' to enable the button"
+                  value={inputValue}
+                  onChange={(e) => setInputValue(e.target.value)}
+                />
+              </div>
+
+              <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+                {props.isLoading ? (
+                  <SectionLoader $size="small" />
+                ) : (
+                  <>
+                    <button
+                      type="button"
+                      disabled={!isInputCorrect}
+                      className={`w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 ${
+                        isInputCorrect ? "bg-red-600 text-white hover:bg-red-700" : "bg-gray-300"
+                      } text-base font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm`}
+                      onClick={handleForceRun}
+                    >
+                      Force Run
+                    </button>
+                    <button
+                      type="button"
+                      className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-700 text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+                      onClick={handleCancel}
+                    >
+                      Cancel
+                    </button>
+                  </>
+                )}
+              </div>
+            </div>
+          </Transition.Child>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};

web/src/components/panels/index.tsx

@@ -141,7 +141,7 @@ function SlideOver<DataType extends FormikValues>({
                               Remove
                             </button>
                           )}
-                          <div>
+                          <div className="flex">
                             {!!values && extraButtons !== undefined && (
                               extraButtons(values)
                             )}
@@ -154,7 +154,7 @@ function SlideOver<DataType extends FormikValues>({
                                     ? "text-green-500 border-green-500 bg-green-50"
                                     : isTestError
                                       ? "text-red-500 border-red-500 bg-red-50"
-                                      : "border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-400 bg-white dark:bg-gray-700 hover:bg-gray-50 focus:border-rose-700 active:bg-rose-700",
+                                      : "border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:border-rose-700 active:bg-rose-700",
                                   isTesting ? "cursor-not-allowed" : "",
                                   "mr-2 inline-flex items-center px-4 py-2 border font-medium rounded-md shadow-sm text-sm transition ease-in-out duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
                                 )}

web/src/forms/settings/FeedForms.tsx

@@ -78,6 +78,8 @@ export function FeedUpdateForm({ isOpen, toggle, feed }: UpdateProps) {
       setIsSuccessfulTest(false);
     },
     onSuccess: () => {
+      toast.custom((t) => <Toast type="success" body={`${feed.name} test OK!`} t={t} />);
+
       sleep(1000)
         .then(() => {
           setIsTesting(false);

web/src/screens/settings/Feed.tsx

@@ -12,6 +12,7 @@ import {
   DocumentTextIcon,
   EllipsisHorizontalIcon,
   PencilSquareIcon,
+  ForwardIcon,
   TrashIcon
 } from "@heroicons/react/24/outline";
 
@@ -19,7 +20,7 @@ import { APIClient } from "@api/APIClient";
 import { useToggle } from "@hooks/hooks";
 import { baseUrl, classNames, IsEmptyDate, simplifyDate } from "@utils";
 import Toast from "@components/notifications/Toast";
-import { DeleteModal } from "@components/modals";
+import { DeleteModal, ForceRunModal } from "@components/modals";
 import { FeedUpdateForm } from "@forms/settings/FeedForms";
 import { EmptySimple } from "@components/emptystates";
 import { ImplementationBadges } from "./Indexer";
@@ -230,6 +231,7 @@ const FeedItemDropdown = ({
 
   const [deleteModalIsOpen, toggleDeleteModal] = useToggle(false);
   const [deleteCacheModalIsOpen, toggleDeleteCacheModal] = useToggle(false);
+  const [forceRunModalIsOpen, toggleForceRunModal] = useToggle(false);
 
   const deleteMutation = useMutation({
     mutationFn: (id: number) => APIClient.feeds.delete(id),
@@ -248,6 +250,22 @@ const FeedItemDropdown = ({
     }
   });
 
+  const forceRunMutation = useMutation({
+    mutationFn: (id: number) => APIClient.feeds.forceRun(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: feedKeys.lists() });
+      toast.custom((t) => <Toast type="success" body={`Feed ${feed?.name} was force run successfully.`} t={t} />);
+      toggleForceRunModal(); 
+    },
+    onError: (error: any) => {
+      toast.custom((t) => <Toast type="error" body={`Failed to force run ${feed?.name}. Error: ${error.message}`} t={t} />, {
+        duration: 10000
+      });    
+      toggleForceRunModal(); 
+    }
+  });
+
+
   return (
     <Menu as="div">
       <DeleteModal
@@ -273,6 +291,18 @@ const FeedItemDropdown = ({
         title={`Remove feed cache: ${feed.name}`}
         text="Are you sure you want to remove the feed cache? This action cannot be undone."
       />
+      <ForceRunModal
+        isOpen={forceRunModalIsOpen}
+        isLoading={forceRunMutation.isLoading}
+        toggle={toggleForceRunModal}
+        buttonRef={cancelModalButtonRef}
+        forceRunAction={() => {
+          forceRunMutation.mutate(feed.id);
+          toggleForceRunModal();
+        }}
+        title={`Force run feed: ${feed.name}`}
+        text={`Are you sure you want to force run the ${feed.name} feed? Respecting RSS interval rules is crucial to avoid potential IP bans.`}
+      />
       <Menu.Button className="px-4 py-2">
         <EllipsisHorizontalIcon
           className="w-5 h-5 text-gray-700 hover:text-gray-900 dark:text-gray-100 dark:hover:text-gray-400"
@@ -334,6 +364,26 @@ const FeedItemDropdown = ({
             </Menu.Item>
           </div>
           <div className="px-1 py-1">
+            <Menu.Item>
+              {({ active }) => (
+                <button
+                  onClick={() => toggleForceRunModal()}
+                  className={classNames(
+                    active ? "bg-blue-600 text-white" : "text-gray-900 dark:text-gray-300",
+                    "font-medium group flex rounded-md items-center w-full px-2 py-2 text-sm"
+                  )}
+                >
+                  <ForwardIcon
+                    className={classNames(
+                      active ? "text-white" : "text-blue-500",
+                      "w-5 h-5 mr-2"
+                    )}
+                    aria-hidden="true"
+                  />
+            Force run
+                </button>
+              )}
+            </Menu.Item>
             <Menu.Item>
               <ExternalLink
                 href={`${baseUrl()}api/feeds/${feed.id}/latest`}