Merge branch 'main' into '299-fix-draft-email-persistence'

# Conflicts:
#   CHANGELOG.md

.gitlab-ci.yml

@@ -10,6 +10,14 @@ variables:
   CI_REGISTRY: gitlab.fi.muni.cz:5050/inject/container-registry/$CI_REGISTRY_IMAGE
   IMAGE_TAG: $CI_REGISTRY:$VER
   IMAGE_LATEST: $CI_REGISTRY:latest
+  # using "docker" as the host is only possible if you alias the service below
+  DOCKER_HOST: tcp://docker:2375 
+  # could be wrong here but although Docker defaults to overlay2, 
+  # Docker-in-Docker (DIND) does not according to the following GitLab doc: 
+  # https://docs.gitlab.com/ee/ci/docker/using_docker_build.html#use-the-overlayfs-driver
+  DOCKER_DRIVER: overlay2
+  DOCKER_TLS_CERTDIR: ""
+
 
 default:
   tags:
@@ -45,7 +53,9 @@ tsc-test-job:
 create-image:
   image: docker:20.10.16
   services:
-    - docker:20.10.16-dind
+    - name: docker:20.10.16-dind
+      alias: docker
+      command: ["--tls=false"]
   stage: buildimage
   only:
     refs:

CHANGELOG.md

-2024-05-14 - fix draft persistance
+2024-05-15 - fix draft persistance
+2024-05-15 - add a title to the toolbar and improve the section titles
+2024-05-14 - improve new email highlighting
 2024-05-07 - add the option to add not team-visible addresses to the recipients list
 2024-05-07 - add exercise name, rework exercise panel add dialogs
 2024-05-07 - add learning objectives page to the instructor view

frontend/src/components/Sidebar/index.tsx

@@ -25,6 +25,12 @@ const sectionName = css`
   font-size: 1rem;
 `
 
+const sidebarTitle = css`
+  margin: 0 0 0.5rem 0.5rem;
+  font-size: 1.2rem;
+  text-align: center;
+`
+
 export interface Section {
   name?: string
   node: ReactNode
@@ -36,6 +42,7 @@ interface SidebarProps {
   width?: number
   sections: Section[]
   showLogo?: boolean
+  title?: string
 }
 
 const Sidebar: FC<SidebarProps> = ({
@@ -44,11 +51,19 @@ const Sidebar: FC<SidebarProps> = ({
   showLogo,
   hideNames,
   width,
+  title,
 }) => (
   <div className={container(position, width)}>
     {position === 'right' && <Divider />}
 
     <div className={sidebar}>
+      {title && (
+        <div>
+          <h2 className={sidebarTitle}>{title}</h2>
+          <Divider />
+        </div>
+      )}
+
       {showLogo && (
         <>
           <InjectLogo

frontend/src/email/TeamEmails/EmailCard.tsx

 import useFormatTimestamp from '@/analyst/useFormatTimestamp'
 import { HIGHLIGHTED_COLOR } from '@/analyst/utilities'
 import FileViewRedirectButton from '@/components/FileViewRedirectButton'
-import { Classes, Icon, Section, SectionCard } from '@blueprintjs/core'
+import { Classes, Colors, Icon, Section, SectionCard } from '@blueprintjs/core'
 import type { Email } from '@inject/graphql/fragments/Email.generated'
 import { useWriteReadReceiptEmail } from '@inject/graphql/mutations/clientonly/WriteReadReceiptEmail.generated'
 import Timestamp from '@inject/shared/components/Timestamp'
 import type { FC } from 'react'
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo } from 'react'
 
 interface EmailCardProps {
   exerciseId: string
@@ -25,21 +25,22 @@ const EmailCard: FC<EmailCardProps> = ({
 }) => {
   const formatTimestamp = useFormatTimestamp()
 
-  const [newIndicator, setNewIndicator] = useState(false)
+  // this ensures the message is rendered as 'not read' the first time it's rendered
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const initialReadReceipt = useMemo(() => email.readReceipt, [])
   const [mutate] = useWriteReadReceiptEmail({
     variables: { emailId: email.id },
   })
   useEffect(() => {
     if (!email.readReceipt) {
       mutate()
-      setNewIndicator(() => true)
     }
   }, [email.readReceipt, mutate])
 
   return (
     <Section
       style={{
-        background: newIndicator ? HIGHLIGHTED_COLOR : undefined,
+        background: initialReadReceipt ? undefined : HIGHLIGHTED_COLOR,
         overflow: 'unset',
       }}
       icon={
@@ -63,7 +64,16 @@ const EmailCard: FC<EmailCardProps> = ({
           {inAnalyst ? (
             formatTimestamp(email.timestamp)
           ) : (
-            <Timestamp minimal datetime={new Date(email.timestamp)} />
+            <Timestamp
+              minimal
+              datetime={new Date(email.timestamp)}
+              style={{
+                backgroundColor: initialReadReceipt
+                  ? `${Colors.GREEN3}4d`
+                  : `${Colors.ORANGE3}4d`,
+                alignSelf: 'center',
+              }}
+            />
           )}
         </span>
       }

frontend/src/email/TeamEmails/ThreadLogCard.tsx

 import useFormatTimestamp from '@/analyst/useFormatTimestamp'
 import { HIGHLIGHTED_COLOR, ellipsized } from '@/analyst/utilities'
-import { Card, Classes, Icon } from '@blueprintjs/core'
+import { Card, Classes, Colors, Icon } from '@blueprintjs/core'
 import type { Email } from '@inject/graphql/fragments/Email.generated'
 import type { EmailThread } from '@inject/graphql/fragments/EmailThread.generated'
 import { useWriteReadReceiptEmailThread } from '@inject/graphql/mutations/clientonly/WriteReadReceiptEmailThread.generated'
@@ -94,7 +94,16 @@ const ThreadLogCard: FC<ThreadLogCardProps> = ({
           {inAnalyst ? (
             formatTimestamp(lastEmail.timestamp)
           ) : (
-            <Timestamp minimal datetime={new Date(lastEmail.timestamp)} />
+            <Timestamp
+              minimal
+              datetime={new Date(lastEmail.timestamp)}
+              style={{
+                backgroundColor: emailThread.readReceipt
+                  ? `${Colors.GREEN3}4d`
+                  : `${Colors.ORANGE3}4d`,
+                alignSelf: 'center',
+              }}
+            />
           )}
         </span>
         <Icon icon='chevron-right' className={Classes.TEXT_MUTED} />

frontend/src/views/TraineeView/Toolbar.tsx

@@ -23,24 +23,28 @@ const Toolbar: FC<ToolbarProps> = ({ teamId, exerciseId }) => {
   })
   const process = (data?.teamTools ?? []).filter(notEmpty)
 
-  const groups = useMemo(() => {
-    const map = new Map<string, Tool[]>()
+  const groups: Map<string | undefined, Tool[]> = useMemo(() => {
+    const uncategorized: Tool[] = []
 
-    process.forEach(x => {
-      let prefix = x.name.split('_')[0]!
+    const groupsMap = new Map<string | undefined, Tool[]>()
+    process.forEach(tool => {
+      const prefix = tool.name.split('_').at(0)
 
-      if (prefix === x.name) {
-        prefix = 'Uncategorized'
+      if (!prefix || prefix === tool.name) {
+        uncategorized.push(tool)
+        return
       }
 
-      if (map.has(prefix)) {
-        map.get(prefix)?.push(x)
+      if (groupsMap.has(prefix)) {
+        groupsMap.get(prefix)?.push(tool)
       } else {
-        map.set(prefix, [x])
+        groupsMap.set(prefix, [tool])
       }
     })
 
-    return map
+    groupsMap.set(groupsMap.size === 0 ? undefined : 'Other', uncategorized)
+
+    return groupsMap
   }, [process])
 
   const sections: Section[] = [...groups.entries()].map(([key, value]) => ({
@@ -58,7 +62,14 @@ const Toolbar: FC<ToolbarProps> = ({ teamId, exerciseId }) => {
     ),
   }))
 
-  return <Sidebar position='right' sections={sections} width={300} />
+  return (
+    <Sidebar
+      position='right'
+      sections={sections}
+      width={300}
+      title='Available tools'
+    />
+  )
 }
 
 export default memo(Toolbar)