[jira] Adjust notification style (#417)

We are now using different styles for the issues displayed in the
notification drawer. The style is based on the status of an issue. When
an issue is in the status "Open" the notification item is yellow, for
"In Progress" the notification item is blue and for "Done" is is green.
For issues which are "Done" the notification is also marked as read.

CHANGELOG.md

@@ -45,6 +45,7 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan
 - [#409](https://github.com/kobsio/kobs/pull/409): [app] Improve toolbar for plugin instances page and reflect selected filter in the url.
 - [#412](https://github.com/kobsio/kobs/pull/412): [helm] Reload list of Helm releases, when user clicks the search button again.
 - [#415](https://github.com/kobsio/kobs/pull/415): [jira] Convert the description of issues to markdown before the description is rendered. Adjust the colors of the rendered status label. Show fields in details only when they have a value.
+- [#417](https://github.com/kobsio/kobs/pull/417): [jira] Adjust notification style based on the issue status.
 
 ## [v0.9.1](https://github.com/kobsio/kobs/releases/tag/v0.9.1) (2022-07-08)
 

plugins/plugin-jira/src/components/notifications/IssueNotification.tsx

@@ -8,6 +8,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { IPluginInstance, formatTime, pluginBasePath } from '@kobsio/shared';
 import { IIssue } from '../../utils/issue';
+import { getStatusVariant } from '../../utils/helpers';
 
 interface IIssueNotificationProps {
   instance: IPluginInstance;
@@ -20,15 +21,17 @@ const IssueNotification: React.FunctionComponent<IIssueNotificationProps> = ({
 }: IIssueNotificationProps) => {
   const navigate = useNavigate();
 
+  const variant = getStatusVariant(issue.fields?.status?.statusCategory.name);
+
   return (
     <NotificationDrawerListItem
-      variant="info"
-      isRead={false}
+      variant={variant}
+      isRead={variant === 'success' ? true : false}
       onClick={(): void =>
         navigate(`${pluginBasePath(instance)}/search?jql=${encodeURIComponent(`key = ${issue.key}`)}`)
       }
     >
-      <NotificationDrawerListItemHeader variant="info" title={issue.key || ''} />
+      <NotificationDrawerListItemHeader variant={variant} title={issue.key || ''} />
       <NotificationDrawerListItemBody
         timestamp={formatTime(Math.floor(new Date(issue.fields?.updated || '').getTime() / 1000))}
       >

plugins/plugin-jira/src/utils/helpers.ts

@@ -27,6 +27,18 @@ export const getStatusColor = (name?: string): 'blue' | 'green' | 'grey' => {
   return 'grey';
 };
 
+export const getStatusVariant = (name?: string): 'info' | 'success' | 'warning' => {
+  if (name === 'Done') {
+    return 'success';
+  }
+
+  if (name === 'In Progress') {
+    return 'info';
+  }
+
+  return 'warning';
+};
+
 // The jiraToMarkdown and markdownToJira functions are used to convert the provided description for an issue into
 // markdown, so that we can render it using react markdown. For that we are using a modified version of the functions
 // provided by https://github.com/kylefarris/J2M