feat: Add email notification when a part is changed (#9275)

* Add function to star / unstar a part

* Also use with category

* Email notification when a part is changed
Fixes #7834

* enable disabling of recent checks

* Add error handler

* remove unneeded function

src/frontend/src/components/buttons/StarredToggleButton.tsx

@@ -0,0 +1,62 @@
+import { t } from '@lingui/macro';
+import { showNotification } from '@mantine/notifications';
+import { IconBell } from '@tabler/icons-react';
+import { useApi } from '../../contexts/ApiContext';
+import { ApiEndpoints } from '../../enums/ApiEndpoints';
+import { ModelType } from '../../enums/ModelType';
+import { apiUrl } from '../../states/ApiState';
+import { ActionButton } from './ActionButton';
+
+export default function StarredToggleButton({
+  instance,
+  model,
+  successFunction
+}: Readonly<{
+  instance: any;
+  model: ModelType.part | ModelType.partcategory;
+  successFunction: () => void;
+}>): JSX.Element {
+  const api = useApi();
+
+  function change(starred: boolean, partPk: number) {
+    api
+      .patch(
+        apiUrl(
+          model == ModelType.part
+            ? ApiEndpoints.part_list
+            : ApiEndpoints.category_list,
+          partPk
+        ),
+        { starred: !starred }
+      )
+      .then(() => {
+        showNotification({
+          title: 'Subscription updated',
+          message: `Subscription ${starred ? 'removed' : 'added'}`,
+          autoClose: 5000,
+          color: 'blue'
+        });
+        successFunction();
+      })
+      .catch((error) => {
+        showNotification({
+          title: 'Error',
+          message: error.message,
+          autoClose: 5000,
+          color: 'red'
+        });
+      });
+  }
+
+  return (
+    <ActionButton
+      icon={<IconBell />}
+      color={instance.starred ? 'green' : 'blue'}
+      size='lg'
+      variant={instance.starred ? 'filled' : 'outline'}
+      tooltip={t`Unsubscribe from part`}
+      onClick={() => change(instance.starred, instance.pk)}
+      tooltipAlignment='bottom'
+    />
+  );
+}

src/frontend/src/pages/part/CategoryDetail.tsx

@@ -11,6 +11,7 @@ import { useMemo, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import AdminButton from '../../components/buttons/AdminButton';
+import StarredToggleButton from '../../components/buttons/StarredToggleButton';
 import {
   type DetailsField,
   DetailsTable
@@ -227,6 +228,14 @@ export default function CategoryDetail() {
         model={ModelType.partcategory}
         id={category.pk}
       />,
+      <StarredToggleButton
+        key='starred_change'
+        instance={category}
+        model={ModelType.partcategory}
+        successFunction={() => {
+          refreshInstance();
+        }}
+      />,
       <OptionsActionDropdown
         key='category-actions'
         tooltip={t`Category Actions`}
@@ -244,7 +253,7 @@ export default function CategoryDetail() {
         ]}
       />
     ];
-  }, [id, user, category.pk]);
+  }, [id, user, category.pk, category.starred]);
 
   const panels: PanelType[] = useMemo(
     () => [

src/frontend/src/pages/part/PartDetail.tsx

@@ -35,6 +35,7 @@ import Select from 'react-select';
 
 import AdminButton from '../../components/buttons/AdminButton';
 import { PrintingActions } from '../../components/buttons/PrintingActions';
+import StarredToggleButton from '../../components/buttons/StarredToggleButton';
 import {
   type DetailsField,
   DetailsTable
@@ -881,6 +882,14 @@ export default function PartDetail() {
   const partActions = useMemo(() => {
     return [
       <AdminButton model={ModelType.part} id={part.pk} />,
+      <StarredToggleButton
+        key='starred_change'
+        instance={part}
+        model={ModelType.part}
+        successFunction={() => {
+          refreshInstance();
+        }}
+      />,
       <BarcodeActionDropdown
         model={ModelType.part}
         pk={part.pk}