chore(release): Test and deploy to Production v8.23.0

.env.example

@@ -130,8 +130,8 @@ REDIS_URL='redis://localhost:6379'
 # Disable the built in Mattermost webhook integration
 # MATTERMOST_DISABLED='false'
 # For private instances with SSO and the Mattermost plugin, set the secret and URL
-# MATTERMOST_SECRET=''
-# MATTERMOST_URL=''
+# MATTERMOST_SECRET='key_MATTERMOST_SECRET'
+# MATTERMOST_URL='https://mattermost.example.com'
 # MSTEAMS_DISABLED='false'
 
 # MAIL
@@ -162,3 +162,7 @@ PGADMIN_DEFAULT_PASSWORD='admin'
 # GLOBAL_BANNER_TEXT='UNCLASSIFIED CUI (IL4)'
 # GLOBAL_BANNER_BG_COLOR='#007A33'
 # GLOBAL_BANNER_COLOR='#FFFFFF'
+
+# gifabol | tenor | '' to hide gif selection tab
+# GIF_PROVIDER=tenor
+# TENOR_SECRET=''

.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "8.21.1"
+  ".": "8.23.0"
 }

CHANGELOG.md

@@ -5,6 +5,39 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 This CHANGELOG follows conventions [outlined here](http://keepachangelog.com/).
 
+## [8.23.0](https://github.com/ParabolInc/parabol/compare/v8.22.0...v8.23.0) (2025-01-29)
+
+
+### Added
+
+* Support image resizing in TipTap ([#10747](https://github.com/ParabolInc/parabol/issues/10747)) ([4fb5f96](https://github.com/ParabolInc/parabol/commit/4fb5f968cff6e340072dbd8aef2ccebcb2b68b54))
+
+
+### Fixed
+
+* **Mattermost Plugin:** Load modals correctly ([#10744](https://github.com/ParabolInc/parabol/issues/10744)) ([976904e](https://github.com/ParabolInc/parabol/commit/976904e719237b3648111d615c9c03998ead1d8d))
+* show invoices for enterprise customers ([#10748](https://github.com/ParabolInc/parabol/issues/10748)) ([3e72a5f](https://github.com/ParabolInc/parabol/commit/3e72a5f8713c4695d4abcab91d786a21f933f3a4))
+* support edge case changeEmailDomain no users to update ([#10725](https://github.com/ParabolInc/parabol/issues/10725)) ([8c0c0db](https://github.com/ParabolInc/parabol/commit/8c0c0db6ad316235c4e956cc25ae069a61da38c0))
+
+## [8.22.0](https://github.com/ParabolInc/parabol/compare/v8.21.1...v8.22.0) (2025-01-28)
+
+
+### Added
+
+* gifabol (tenor search) ([#10735](https://github.com/ParabolInc/parabol/issues/10735)) ([d893258](https://github.com/ParabolInc/parabol/commit/d8932586b9d581da46189826c26afa03ae536ef3))
+
+
+### Fixed
+
+* Check events is not null in stage timer modal ([#10720](https://github.com/ParabolInc/parabol/issues/10720)) ([8b581f4](https://github.com/ParabolInc/parabol/commit/8b581f41ebf49a599c50dab50b64a2cfbc5aa08f))
+* Enter Key Functionality in the Response Editor when @ symbol is … ([#10699](https://github.com/ParabolInc/parabol/issues/10699)) ([cd3506d](https://github.com/ParabolInc/parabol/commit/cd3506d1ef6c669e8f8326380d85d2412ac87f05))
+* simplify event timeline grouping logic ([#10727](https://github.com/ParabolInc/parabol/issues/10727)) ([f3a911d](https://github.com/ParabolInc/parabol/commit/f3a911d8dba65921a482f7fe791a7ad0c4eb804d))
+
+
+### Changed
+
+* **Mattermost:** Catch notification errors ([#10729](https://github.com/ParabolInc/parabol/issues/10729)) ([8e0502e](https://github.com/ParabolInc/parabol/commit/8e0502e3e588618eb936b271d8afdeeb931a4148))
+
 ## [8.21.1](https://github.com/ParabolInc/parabol/compare/v8.21.0...v8.21.1) (2025-01-22)
 
 

codegen.json

@@ -90,6 +90,7 @@
           "GenerateGroupsSuccess": "./types/GenerateGroupsSuccess#GenerateGroupsSuccessSource",
           "GenerateInsightSuccess": "./types/GenerateInsightSuccess#GenerateInsightSuccessSource",
           "GenerateRetroSummariesSuccess": "./types/GenerateRetroSummariesSuccess#GenerateRetroSummariesSuccessSource",
+          "GifResponse": "./types/GifResponse#GifResponseSource",
           "GitHubIntegration": "../../postgres/queries/getGitHubAuthByUserIdTeamId#GitHubAuth",
           "GitLabIntegration": "./types/GitLabIntegration#GitLabIntegrationSource",
           "IntegrationProviderOAuth1": "../../postgres/queries/getIntegrationProvidersByIds#TIntegrationProvider",

package.json

@@ -3,7 +3,7 @@
   "description": "An open-source app for building smarter, more agile teams.",
   "author": "Parabol Inc. <[email protected]> (http://github.com/ParabolInc)",
   "license": "AGPL-3.0",
-  "version": "8.21.1",
+  "version": "8.23.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/ParabolInc/parabol"

packages/chronos/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chronos",
-  "version": "8.21.1",
+  "version": "8.23.0",
   "description": "A cron job scheduler",
   "author": "Matt Krick <[email protected]>",
   "homepage": "https://github.com/ParabolInc/parabol/tree/master/packages/chronos#readme",
@@ -25,6 +25,6 @@
   },
   "dependencies": {
     "cron": "^2.3.1",
-    "parabol-server": "8.21.1"
+    "parabol-server": "8.23.0"
   }
 }

packages/client/components/MentionDropdown.tsx

@@ -30,6 +30,9 @@ export default forwardRef(
 
     const enterHandler = () => {
       selectItem(selectedIndex)
+
+      if (items.length === 0) return false
+      return true
     }
 
     useEffect(() => setSelectedIndex(0), [items])
@@ -47,8 +50,7 @@ export default forwardRef(
         }
 
         if (event.key === 'Enter' || event.key === 'Tab') {
-          enterHandler()
-          return true
+          return enterHandler()
         }
         return false
       }

packages/client/components/ReflectionCard/ReflectionCard.tsx

@@ -201,14 +201,16 @@ const ReflectionCard = (props: Props) => {
   } = useTooltip<HTMLDivElement>(MenuPosition.UPPER_CENTER)
   const handleEditorFocus = () => {
     if (isTempId(reflectionId)) return
+    if (reflection.isEditing) {
+      return
+    }
+    updateIsEditing(true)
     EditReflectionMutation(atmosphere, {isEditing: true, meetingId, promptId})
   }
 
   const updateIsEditing = (isEditing: boolean) => {
     commitLocalUpdate(atmosphere, (store) => {
-      const reflection = store.get(reflectionId)
-      if (!reflection) return
-      reflection.setValue(isEditing, 'isEditing')
+      store.get(reflectionId)?.setValue(isEditing, 'isEditing')
     })
   }
 
@@ -244,16 +246,22 @@ const ReflectionCard = (props: Props) => {
       {content: contentStr, reflectionId},
       {onError, onCompleted}
     )
-    commitLocalUpdate(atmosphere, (store) => {
-      const reflection = store.get(reflectionId)
-      if (!reflection) return
-      reflection.setValue(false, 'isEditing')
-    })
   }
 
-  const handleEditorBlur = () => {
+  const handleEditorBlur = (e: React.FocusEvent<HTMLDivElement>) => {
     if (isTempId(reflectionId)) return
+    const newFocusedElement = e.relatedTarget as Node
+    // don't trigger a blur if a button inside the element is clicked
+    if (e.currentTarget.contains(newFocusedElement)) return
+    const isClickInModal = !(
+      newFocusedElement === null || document.getElementById('root')?.contains(newFocusedElement)
+    )
+    // If they clicked in a modal, then ignore the blur event, we'll refocus the editor after the modal closes
+    if (isClickInModal) {
+      return
+    }
     handleContentUpdate()
+    updateIsEditing(false)
     EditReflectionMutation(atmosphere, {isEditing: false, meetingId, promptId})
   }
 

packages/client/components/RetroReflectPhase/PhaseItemEditor.tsx

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled'
 import {useEventCallback} from '@mui/material'
-import {generateHTML} from '@tiptap/core'
 import graphql from 'babel-plugin-relay/macro'
 import * as React from 'react'
 import {MutableRefObject, RefObject, useEffect, useRef, useState} from 'react'
@@ -12,7 +11,6 @@ import usePortal from '../../hooks/usePortal'
 import {useTipTapReflectionEditor} from '../../hooks/useTipTapReflectionEditor'
 import CreateReflectionMutation from '../../mutations/CreateReflectionMutation'
 import EditReflectionMutation from '../../mutations/EditReflectionMutation'
-import {serverTipTapExtensions} from '../../shared/tiptap/serverTipTapExtensions'
 import {Elevation} from '../../styles/elevation'
 import {BezierCurve, ZIndex} from '../../types/constEnums'
 import {cn} from '../../ui/cn'
@@ -101,7 +99,7 @@ const PhaseItemEditor = (props: Props) => {
     const {top, left} = getBBox(phaseEditorRef.current)!
     const cardInFlight = {
       transform: `translate(${left}px,${top}px)`,
-      html: generateHTML(contentJSON, serverTipTapExtensions),
+      html: editor.getHTML(),
       key: content,
       isStart: true
     }

packages/client/components/RetroReflectPhase/ReflectionStack.tsx

@@ -6,12 +6,7 @@ import {useFragment} from 'react-relay'
 import {ReflectionStack_meeting$key} from '~/__generated__/ReflectionStack_meeting.graphql'
 import {PhaseItemColumn_meeting$data} from '../../__generated__/PhaseItemColumn_meeting.graphql'
 import useExpandedReflections from '../../hooks/useExpandedReflections'
-import {
-  Breakpoint,
-  ElementHeight,
-  ElementWidth,
-  ReflectionStackPerspective
-} from '../../types/constEnums'
+import {ElementWidth, ReflectionStackPerspective} from '../../types/constEnums'
 import ReflectionCard from '../ReflectionCard/ReflectionCard'
 import ExpandedReflectionStack from './ExpandedReflectionStack'
 import ReflectionStackPlaceholder from './ReflectionStackPlaceholder'
@@ -26,22 +21,6 @@ interface Props {
   stackTopRef: RefObject<HTMLDivElement>
 }
 
-const CardStack = styled('div')({
-  alignItems: 'flex-start',
-  display: 'flex',
-  flex: 1,
-  margin: '0 0 24px', // stacked cards + row gutter = 6 + 6 + 12 = 24
-  position: 'relative',
-  justifyContent: 'center',
-  [`@media screen and (min-width: ${Breakpoint.SINGLE_REFLECTION_COLUMN}px)`]: {
-    minHeight: ElementHeight.REFLECTION_CARD_MAX
-  }
-})
-
-const CenteredCardStack = styled('div')({
-  position: 'relative'
-})
-
 const ReflectionWrapper = styled('div')<{idx: number}>(({idx}): any => {
   const multiple = Math.min(idx, 2)
   const scaleX =
@@ -94,9 +73,15 @@ const ReflectionStack = (props: Props) => {
           closePortal={collapse}
         />
       )}
+
       <div>
-        <CardStack data-cy={dataCy} onClick={expand} ref={stackRef}>
-          <CenteredCardStack>
+        <div
+          data-cy={dataCy}
+          onClick={expand}
+          ref={stackRef}
+          className='relative mb-6 flex flex-1 select-none items-start justify-center single-reflection-column:min-h-[104px]'
+        >
+          <div className='relative'>
             {reflectionStack.map((reflection, idx) => {
               return (
                 <ReflectionWrapper
@@ -115,8 +100,8 @@ const ReflectionStack = (props: Props) => {
                 </ReflectionWrapper>
               )
             })}
-          </CenteredCardStack>
-        </CardStack>
+          </div>
+        </div>
       </div>
     </React.Fragment>
   )

packages/client/components/StageTimerModalEndTimeSlackToggle.tsx

@@ -66,6 +66,7 @@ const isNotificationActive = (integration: {
   const {auth} = integration
   if (!auth?.isActive) return false
   const {events} = auth
+  if (!events) return false
   return (
     events.includes('MEETING_STAGE_TIME_LIMIT_START') ||
     events.includes('MEETING_STAGE_TIME_LIMIT_END')
@@ -116,7 +117,6 @@ const StageTimerModalEndTimeSlackToggle = (props: Props) => {
   const {onError, onCompleted, submitMutation, error, submitting} = mutationProps
   const isMattermostActive = isNotificationActive(mattermost)
   const isMSTeamsActive = isNotificationActive(msTeams)
-  console.log('GEORG', slack, isMattermostActive, isMSTeamsActive)
   const noActiveIntegrations = !slack?.isActive && !isMattermostActive && !isMSTeamsActive
 
   const onClick = () => {

packages/client/components/TimelineFeedList.tsx

@@ -4,7 +4,7 @@ import {useMemo} from 'react'
 import {usePaginationFragment} from 'react-relay'
 import {Link} from 'react-router-dom'
 import useLoadNextOnScrollBottom from '~/hooks/useLoadNextOnScrollBottom'
-import {TimelineGroup, getTimeGroup} from '~/utils/date/timelineGroups'
+import {TimelineGroup, compareTimelineLabels, getTimeGroup} from '~/utils/date/timelineGroups'
 import {TimelineFeedListPaginationQuery} from '../__generated__/TimelineFeedListPaginationQuery.graphql'
 import {TimelineFeedList_query$key} from '../__generated__/TimelineFeedList_query.graphql'
 import TimelineEvent from './TimelineEvent'
@@ -113,19 +113,19 @@ const TimelineFeedList = (props: Props) => {
 
     freeHistory.forEach((edge) => {
       const eventDate = new Date(edge.node.createdAt)
-      const {date: groupDate, label} = getTimeGroup(eventDate)
+      const label = getTimeGroup(eventDate)
 
-      let group = groups.find((g) => g.date.getTime() === groupDate.getTime())
+      let group = groups.find((g) => g.label === label)
       if (!group) {
-        group = {date: groupDate, events: [], label}
+        group = {events: [], label}
         groups.push(group)
       }
       group.events.push(edge)
     })
 
-    // Sort groups by date (newest first)
-    groups.sort((a, b) => b.date.getTime() - a.date.getTime())
-    return {groups}
+    // Sort groups by label order (newer first)
+    groups.sort((a, b) => compareTimelineLabels(a.label, b.label))
+    return groups
   }, [freeHistory])
 
   if (freeHistory.length === 0 && !lockedHistory?.length) {
@@ -142,8 +142,8 @@ const TimelineFeedList = (props: Props) => {
 
   return (
     <ResultScroller>
-      {groupedFreeHistory.groups.map(({date, events, label}) => (
-        <div key={date.toISOString()}>
+      {groupedFreeHistory.map(({label, events}) => (
+        <div key={label}>
           <div className='my-2 flex items-center gap-4 py-4'>
             <div className='h-[1px] flex-1 bg-slate-400' />
             <div className='bg-slate-50 rounded-full border border-slate-200 px-3 py-1 text-sm font-medium text-slate-600'>

packages/client/hooks/useBlockResizer.tsx

@@ -0,0 +1,69 @@
+import {useRef, type RefObject} from 'react'
+import getIsDrag from '../utils/retroGroup/getIsDrag'
+import useEventCallback from './useEventCallback'
+
+const makeDrag = () => ({
+  isDrag: false,
+  startX: 0,
+  lastX: 0,
+  side: 'left'
+})
+export const useBlockResizer = (
+  width: number,
+  setWidth: (width: number) => void,
+  updateAttributes: (attrs: Record<string, any>) => void,
+  aspectRatioRef: RefObject<number>
+) => {
+  const dragRef = useRef(makeDrag())
+  const onMouseUp = useEventCallback((e: MouseEvent | TouchEvent) => {
+    if (e.type === 'touchend') {
+      document.removeEventListener('touchmove', onMouseMove)
+    } else {
+      document.removeEventListener('mousemove', onMouseMove)
+    }
+    const aspectRatio = aspectRatioRef.current!
+    updateAttributes({width, height: Math.round(width / aspectRatio)})
+    dragRef.current = makeDrag()
+  })
+
+  const onMouseMove = useEventCallback((e: MouseEvent | TouchEvent) => {
+    // required to prevent address bar scrolling & other strange browser things on mobile view
+    e.preventDefault()
+    const isTouchMove = e.type === 'touchmove'
+    const {clientX} = isTouchMove ? (e as TouchEvent).touches[0]! : (e as MouseEvent)
+    const {current: drag} = dragRef
+    const wasDrag = drag.isDrag
+    if (!wasDrag) {
+      const isDrag = getIsDrag(clientX, 0, drag.startX, 0)
+      drag.isDrag = isDrag
+      if (!drag.isDrag) return
+    }
+    const sideCoefficient = drag.side === 'left' ? 1 : -1
+    const delta = (drag.lastX - clientX) * sideCoefficient
+    drag.lastX = clientX
+    const nextWidth = Math.max(48, width + delta)
+    setWidth(nextWidth)
+  })
+
+  const onMouseDown = useEventCallback(
+    (side: 'left' | 'right') =>
+      (e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => {
+        const isTouchStart = e.type === 'touchstart'
+        if (isTouchStart) {
+          document.addEventListener('touchmove', onMouseMove)
+          document.addEventListener('touchend', onMouseUp, {once: true})
+        } else {
+          document.addEventListener('mousemove', onMouseMove)
+          document.addEventListener('mouseup', onMouseUp, {once: true})
+        }
+        const {clientX} = isTouchStart
+          ? (e as React.TouchEvent<HTMLDivElement>).touches[0]!
+          : (e as React.MouseEvent<HTMLDivElement>)
+        dragRef.current.side = side
+        dragRef.current.startX = clientX
+        dragRef.current.lastX = clientX
+        dragRef.current.isDrag = false
+      }
+  )
+  return {onMouseDown, onMouseMove, onMouseUp, width}
+}