Handle components/releases subscriptions

messages/de.json

@@ -1069,6 +1069,7 @@
     "UPLOAD SBOM HEADER": "Bitte laden Sie das SBOM-Dokument <strong>{fileFormats</strong> hoch.",
     "URL": "URL",
     "Unknown": "Unbekannt",
+    "Unsubscribe": "Abbestellen",
     "Update": "Aktualisierung",
     "Update Component": "Update Component",
     "Update External Link Failed!": "",

messages/en.json

@@ -1069,6 +1069,7 @@
     "UPLOAD SBOM HEADER": "Please upload the <strong>{fileFormats}</strong> SBOM document.",
     "URL": "URL",
     "Unknown": "Unknown",
+    "Unsubscribe": "Unsubscribe",
     "Update": "Update",
     "Update Component": "Update Component",
     "Update External Link Failed!": "Update External Link Failed!",

messages/es.json

@@ -1069,6 +1069,7 @@
     "UPLOAD SBOM HEADER": "Cargue el documento SBOM <strong>{fileFormats}</strong>.",
     "URL": "URL",
     "Unknown": "Desconocido",
+    "Unsubscribe": "Darse de baja",
     "Update": "Actualización",
     "Update Component": "Componente de actualización",
     "Update External Link Failed!": "",

messages/fr.json

@@ -1069,6 +1069,7 @@
     "UPLOAD SBOM HEADER": "Veuillez télécharger le document SBOM <strong>{fileFormats></strong>.",
     "URL": "URL",
     "Unknown": "Inconnu",
+    "Unsubscribe": "Se désabonner",
     "Update": "Mise à jour",
     "Update Component": "Composante mise à jour",
     "Update External Link Failed!": "",

messages/ja.json

@@ -1069,6 +1069,7 @@
     "UPLOAD SBOM HEADER": "<strong>{fileFormats}</strong> SBOM ドキュメントをアップロードしてください。",
     "URL": "URL",
     "Unknown": "未知",
+    "Unsubscribe": "購読を解除する",
     "Update": "アップデート",
     "Update Component": "コンポーネントの更新",
     "Update External Link Failed!": "",

messages/ko.json

@@ -1069,6 +1069,7 @@
     "UPLOAD SBOM HEADER": "<strong>{fileFormats}</strong> SBOM 문서를 업로드하세요.",
     "URL": "사이트 맵",
     "Unknown": "이름 *",
+    "Unsubscribe": "구독 취소",
     "Update": "(주)",
     "Update Component": "업데이트 구성",
     "Update External Link Failed!": "",

messages/pt-BR.json

@@ -1069,6 +1069,7 @@
     "UPLOAD SBOM HEADER": "Faça upload do documento SBOM <strong>{fileFormats}</strong>.",
     "URL": "URL",
     "Unknown": "Desconhecido",
+    "Unsubscribe": "Cancelar inscrição",
     "Update": "Atualização",
     "Update Component": "Atualizar componente",
     "Update External Link Failed!": "",

messages/vi.json

@@ -1069,6 +1069,7 @@
     "UPLOAD SBOM HEADER": "Vui lòng tải lên tài liệu SBOM <strong>{fileFormats</strong>.",
     "URL": "URL",
     "Unknown": "không xác định",
+    "Unsubscribe": "Hủy đăng ký",
     "Update": "Cập nhật",
     "Update Component": "Cập nhật thành phần",
     "Update External Link Failed!": "",

messages/zh-CN.json

@@ -1069,6 +1069,7 @@
     "UPLOAD SBOM HEADER": "请上传<strong>{fileFormats}</strong> SBOM 文档。",
     "URL": "网址",
     "Unknown": "未知",
+    "Unsubscribe": "退订",
     "Update": "更新",
     "Update Component": "更新组件",
     "Update External Link Failed!": "",

messages/zh-TW.json

@@ -1069,6 +1069,7 @@
     "UPLOAD SBOM HEADER": "請上傳<strong>{fileFormats}</strong> SBOM 文件。",
     "URL": "網址",
     "Unknown": "未知",
+    "Unsubscribe": "退訂",
     "Update": "更新",
     "Update Component": "更新元件",
     "Update External Link Failed!": "",

src/app/[locale]/components/detail/[id]/components/DetailOverview.tsx

@@ -28,11 +28,13 @@ import {
     Embedded,
     HttpStatus,
     LinkedVulnerability,
+    User,
 } from '@/object-types'
 import DownloadService from '@/services/download.service'
 import { ApiUtils, CommonUtils } from '@/utils'
 import ReleaseOverview from './ReleaseOverview'
 import Summary from './Summary'
+import MessageService from '@/services/message.service'
 
 type EmbeddedChangelogs = Embedded<Changelogs, 'sw360:changeLogs'>
 type EmbeddedVulnerabilities = Embedded<LinkedVulnerability, 'sw360:vulnerabilityDTOes'>
@@ -73,6 +75,8 @@ const DetailOverview = ({ componentId }: Props) : ReactNode => {
     const [changeLogList, setChangeLogList] = useState<Array<Changelogs>>([])
     const [vulnerData, setVulnerData] = useState<Array<LinkedVulnerability>>([])
     const [attachmentNumber, setAttachmentNumber] = useState<number>(0)
+    const [subscribers, setSubscribers] = useState<Array<string>>([])
+    const [userEmail, setUserEmail] = useState<string | undefined>(undefined)
 
     const fetchData = useCallback(
         async (url: string) => {
@@ -103,11 +107,20 @@ const DetailOverview = ({ componentId }: Props) : ReactNode => {
         )
     }
 
+    const extractUserEmailFromSession = async () => {
+        const session = await getSession()
+        if (CommonUtils.isNullOrUndefined(session))
+            return
+        setUserEmail(session.user.email)
+    }
+
     useEffect(() => {
+        void extractUserEmailFromSession()
         fetchData(`components/${componentId}`)
             .then((component: Component | undefined) => {
                 if (component === undefined) return
                 setComponent(component)
+                setSubscribers(getSubcribersEmail(component))
                 if (
                     !CommonUtils.isNullOrUndefined(component['_embedded']) &&
                     !CommonUtils.isNullOrUndefined(component['_embedded']['sw360:attachments'])
@@ -139,11 +152,42 @@ const DetailOverview = ({ componentId }: Props) : ReactNode => {
             .catch((err) => console.error(err))
     }, [componentId, fetchData])
 
+    const getSubcribersEmail = (component: Component) => {
+        return (component._embedded !== undefined && component._embedded['sw360:subscribers'] !== undefined)
+            ? Object.values(component._embedded['sw360:subscribers'].map((user: User) => user.email))
+            : []
+    }
+
+    const isUserSubscribed = () => {
+        if (userEmail === undefined) return false
+        return subscribers.includes(userEmail)
+    }
+
+    const handleSubcriptions = async () => {
+        const session = await getSession()
+        if (CommonUtils.isNullOrUndefined(session)) {
+            MessageService.error(t('Session has expired'))
+            return
+        }
+        await ApiUtils.POST(`components/${componentId}/subscriptions`, {}, session.user.access_token)
+        fetchData(`components/${componentId}`)
+            .then((component: Component | undefined) => {
+                if (component === undefined) return
+                setComponent(component)
+                setSubscribers(getSubcribersEmail(component))
+            }).catch((e) => console.error(e))
+    }
+
     const headerButtons = {
         Edit: { link: `/components/edit/${componentId}`, type: 'primary', name: t('Edit component') },
         Merge: { link: '', type: 'secondary', name: t('Merge') },
         Split: { link: '', type: 'secondary', name: t('Split') },
-        Subscribe: { link: '', type: 'outline-success', name: t('Subscribe') },
+        Subscribe: {
+            link: '',
+            type: isUserSubscribed() ? 'outline-danger' : 'outline-success',
+            name: isUserSubscribed() ? t('Unsubscribe') : t('Subscribe'),
+            onClick: handleSubcriptions
+        }
     }
 
     return (