make it possible to disable notifications for WIP MRs (resolves #55)

Author: Matthias Rütten

src/renderer/components/NotificationsEmiter.ts

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react'
 import { shell } from 'electron'
+import * as log from 'electron-log'
 
 import { useBackend } from '../hooks/merge-requests/backend'
 import { MergeRequestWithProject } from '../hooks/merge-requests/types'
@@ -15,13 +16,18 @@ export const NotificationsEmiter = () => {
         const newMergeRequests = getNewMergeRequests(mergeRequestWithProjects, previousMergeRequests)
         if (newMergeRequests.length > 0 && config.generalConfig.useNotifications) {
             newMergeRequests.forEach(newMergeRequest => {
+                if (config.generalConfig.disableWipNotifications && newMergeRequest.work_in_progress) {
+                    log.debug(`Ignoring the WIP merge request "${newMergeRequest.title}"`)
+                    return
+                }
                 const body = newMergeRequest.title
                 const icon = newMergeRequest.author.avatar_url
                 const data = {
                     url: newMergeRequest.web_url,
                 }
 
-                const notification = new Notification('New Merge Request', { body, icon, data })
+                const title = newMergeRequest.work_in_progress ? 'New WIP Merge Request' : 'New Merge Request'
+                const notification = new Notification(title, { body, icon, data })
                 notification.onclick = event => {
                     const url = (event?.currentTarget as any)?.data?.url
                     if (url) {

src/renderer/components/form/CheckboxInput.tsx

@@ -8,11 +8,12 @@ interface FormCheckboxProps {
     name: string
     info?: string | JSX.Element
     error?: string
+    indented?: number
     [htmlAttribute: string]: any
 }
 
-export const CheckboxInput: React.FunctionComponent<FormCheckboxProps> = ({ id, label, error, info, ...props }) => (
-    <Box mb={3}>
+export const CheckboxInput: React.FunctionComponent<FormCheckboxProps> = ({ id, label, info, error, indented, ...props }) => (
+    <Box mb={3} ml={indented || 0}>
         <Label fontWeight='bold' fontSize={1} htmlFor={id}>
             <Checkbox id={id} name={name} {...props} />
             <Text p='3.5px'>{label}</Text>

src/renderer/components/settings/ConnectionSettings.tsx

@@ -75,7 +75,6 @@ export const ConnectionSettings: React.FunctionComponent = () => {
     }
 
     const handleProjectsChange = (group: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
-        console.log('handleProjectsChange', group, values)
         setValues({ ...values, projects: { ...values.projects, [group]: event.target.value } })
     }
 
@@ -108,8 +107,6 @@ export const ConnectionSettings: React.FunctionComponent = () => {
         }
 
         if (values.url && values.token && values.groups) {
-            console.log('projects', values.projects)
-
             const projects = Object.keys(values.projects).reduce((previousValue, current) => {
                 previousValue[current] = splitStringByComma(values.projects[current])
 

src/renderer/components/settings/GeneralSettings.tsx

@@ -5,15 +5,15 @@ import { CheckboxInput } from '../form/CheckboxInput'
 
 interface FormData {
     useNotifications: boolean
+    disableWipNotifications: boolean
     darkMode: boolean
 }
 
 export const GeneralSettings: React.FunctionComponent = () => {
     const { config, updateGeneralConfig } = useConfig()
 
     const [values, setValues] = React.useState<FormData>({
-        useNotifications: config.generalConfig.useNotifications,
-        darkMode: config.generalConfig.darkMode,
+        ...config.generalConfig,
     })
 
     const updateGeneralSettings = (name: keyof FormData) => async (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -26,12 +26,22 @@ export const GeneralSettings: React.FunctionComponent = () => {
         <Box p={2}>
             <form autoComplete='off'>
                 <CheckboxInput
-                    label='Send me a notification for new MRs'
+                    label='Notify about new merge requests'
                     id='useNotifications'
                     name='useNotifications'
                     defaultChecked={values.useNotifications}
                     onChange={updateGeneralSettings('useNotifications')}
                 />
+                {values.useNotifications && (
+                    <CheckboxInput
+                        label='Ignore WIP merge requests'
+                        id='ignoreWip'
+                        name='ignoreWip'
+                        indented={3}
+                        defaultChecked={values.disableWipNotifications}
+                        onChange={updateGeneralSettings('disableWipNotifications')}
+                    />
+                )}
                 <CheckboxInput label='Dark mode' id='darkMode' name='darkMode' defaultChecked={values.darkMode} onChange={updateGeneralSettings('darkMode')} />
             </form>
         </Box>

src/renderer/hooks/config.tsx

@@ -19,20 +19,21 @@ export interface ConnectionConfig {
 
 export interface GeneralConfig {
     useNotifications: boolean
+    disableWipNotifications: boolean
     darkMode: boolean
 }
 
 interface ConfigContext {
     config: Config
     removeConfig: () => void
-    updateConfig: (newConfig: Config) => void
     updateConnectionConfig: (newConnectionConfig: ConnectionConfig) => void
     updateGeneralConfig: (newGeneralConfig: GeneralConfig) => void
 }
 
 const defaultConfig: Config = {
     generalConfig: {
         useNotifications: true,
+        disableWipNotifications: true,
         darkMode: remote.nativeTheme.shouldUseDarkColors,
     },
 }
@@ -70,13 +71,30 @@ const configPreviousVersion = (oldKey: string, newKey: string): Config | null =>
     return null
 }
 
-const configFromPreviousVersionOrDefault = (): Config | null => {
+const configFromPreviousVersionOrDefault = (): Config => {
     return configPreviousVersion('config', 'config.v3') || configPreviousVersion('config.v2', 'config.v3') || defaultConfig
 }
 
-export const ConfigProvider = ({ ...props }) => {
+const loadConfig = (): Config => {
     const localStorageValue = window.localStorage.getItem('config.v3')
-    const [config, setConfig] = React.useState<Config>(localStorageValue ? JSON.parse(localStorageValue) : configFromPreviousVersionOrDefault())
+
+    if (localStorageValue) {
+        const savedConfig = JSON.parse(localStorageValue)
+
+        return {
+            connectionConfig: savedConfig.connectionConfig,
+            generalConfig: {
+                ...defaultConfig.generalConfig,
+                ...savedConfig.generalConfig,
+            },
+        }
+    }
+
+    return configFromPreviousVersionOrDefault()
+}
+
+export const ConfigProvider = ({ ...props }) => {
+    const [config, setConfig] = React.useState<Config>(loadConfig())
 
     const removeConfig = () => {
         setConfig(defaultConfig)
@@ -104,5 +122,5 @@ export const ConfigProvider = ({ ...props }) => {
         updateConfig(newConfig)
     }
 
-    return <Context.Provider value={{ config, updateConfig, removeConfig, updateConnectionConfig, updateGeneralConfig }} {...props} />
+    return <Context.Provider value={{ config, removeConfig, updateConnectionConfig, updateGeneralConfig }} {...props} />
 }

src/renderer/hooks/merge-requests/testData.ts

@@ -27,7 +27,7 @@ const users: User[] = [
 
 let mrId = 0
 
-const createMr = (title: string, projectId: number): MergeRequest => {
+const createMr = (title: string, projectId: number, wip = false): MergeRequest => {
     mrId++
     const timestamp = moment()
         .subtract(1, 'hours')
@@ -49,7 +49,7 @@ const createMr = (title: string, projectId: number): MergeRequest => {
         author: randomArrayEntry(users),
         assignee: randomArrayEntry(users),
         source_project_id: projectId,
-        work_in_progress: false,
+        work_in_progress: wip,
         user_notes: {
             all: randomArrayEntry([3, 5]),
             resolved: randomArrayEntry([1, 2, 3]),
@@ -119,11 +119,11 @@ const testData = (): Data => {
     if (count % 2 === 0) {
         groupedMergeRequests.push({
             project: {
-                id: 3,
+                id: 4,
                 name: 'Some other cool project',
                 name_with_namespace: 'codecentric / Some other cool project',
             },
-            mergeRequests: [createMr('Support Emojis 🚀', 3)],
+            mergeRequests: [createMr('Support Emojis 🚀', 4)],
         })
     }