feat(meeting-inception): implement add an activity button

packages/client/components/AddActivityButton.tsx

@@ -0,0 +1,43 @@
+import styled from '@emotion/styled'
+import {Add} from '@mui/icons-material'
+import React from 'react'
+import {PALETTE} from '~/styles/paletteV3'
+import PlainButton from './PlainButton/PlainButton'
+
+const StyledPlainButton = styled(PlainButton)({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: PALETTE.SKY_500,
+  fontWeight: 600,
+  fontSize: 14,
+  margin: '0 8px',
+  ':hover, :focus, :active': {
+    color: PALETTE.SKY_600
+  },
+  transition: 'color 0.1s ease'
+})
+
+const Icon = styled(Add)({
+  width: 20,
+  height: 20,
+  margin: '0 4px 0 0'
+})
+
+interface Props {
+  onClick: () => void
+  disabled?: boolean
+}
+
+const AddActivityButton = (props: Props) => {
+  const {onClick, disabled} = props
+
+  return (
+    <StyledPlainButton onClick={onClick} disabled={disabled}>
+      <Icon />
+      <div className='text-inherit'>Add an activity</div>
+    </StyledPlainButton>
+  )
+}
+
+export default AddActivityButton

packages/client/components/DiscussionThreadInput.tsx

@@ -29,6 +29,8 @@ import {createLocalPoll} from './Poll/local/newPoll'
 import SendCommentButton from './SendCommentButton'
 import CommentEditor from './TaskEditor/CommentEditor'
 import {ReplyMention, SetReplyMention} from './ThreadedItem'
+import AddActivityButton from '~/components/AddActivityButton'
+import SendClientSegmentEventMutation from '~/mutations/SendClientSegmentEventMutation'
 
 const Wrapper = styled('div')<{isReply: boolean; isDisabled: boolean}>(({isDisabled, isReply}) => ({
   display: 'flex',
@@ -113,17 +115,26 @@ const DiscussionThreadInput = forwardRef((props: Props, ref: any) => {
       fragment DiscussionThreadInput_discussion on Discussion {
         id
         meetingId
-        teamId
         isAnonymousComment
         discussionTopicType
+        team {
+          id
+          organization {
+            featureFlags {
+              meetingInception
+            }
+          }
+        }
       }
     `,
     discussionRef
   )
   const {picture} = viewer
   const isReply = !!props.isReply
   const isDisabled = !!props.isDisabled
-  const {id: discussionId, meetingId, isAnonymousComment, teamId, discussionTopicType} = discussion
+  const {id: discussionId, meetingId, isAnonymousComment, team, discussionTopicType} = discussion
+  const {id: teamId, organization} = team
+  const {featureFlags} = organization
   const [editorState, setEditorState] = useReplyEditorState(replyMention, setReplyMention)
   const atmosphere = useAtmosphere()
   const {submitting, onError, onCompleted, submitMutation} = useMutationProps()
@@ -133,7 +144,7 @@ const DiscussionThreadInput = forwardRef((props: Props, ref: any) => {
   const [lastTypedTimestamp, setLastTypedTimestamp] = useState<Date>()
   const allowTasks = allowedThreadables.includes('task')
   const allowComments = allowedThreadables.includes('comment')
-  const allowPolls = !__PRODUCTION__ // TODO: change to "allowedThreadables.includes('poll')" once feature is done
+  const allowPolls = false // TODO: change to "allowedThreadables.includes('poll')" once feature is done
   useInitialLocalState(discussionId, 'isAnonymousComment', false)
   useInitialLocalState(discussionId, 'replyingToCommentId', '')
   useBeforeUnload(() => {
@@ -290,9 +301,11 @@ const DiscussionThreadInput = forwardRef((props: Props, ref: any) => {
     }
   }, [])
 
-  const isActionsContainerVisible = allowTasks || allowPolls
+  const allowAddActivity = featureFlags.meetingInception
+  const isActionsContainerVisible = allowTasks || allowPolls || allowAddActivity
   const isActionsContainerDisabled = isCreatingTask || isCreatingPoll
   const avatar = isAnonymousComment ? anonymousAvatar : picture
+
   return (
     <Wrapper data-cy={`${dataCy}-wrapper`} ref={ref} isReply={isReply} isDisabled={isDisabled}>
       <CommentContainer>
@@ -335,6 +348,15 @@ const DiscussionThreadInput = forwardRef((props: Props, ref: any) => {
               disabled={isActionsContainerDisabled}
             />
           )}
+          {allowAddActivity && (
+            <AddActivityButton
+              onClick={() => {
+                window.open(`/activity-library/category/recommended`, '_blank', 'noreferrer')
+                SendClientSegmentEventMutation(atmosphere, 'Add Activity Button Clicked')
+              }}
+              disabled={isActionsContainerDisabled}
+            />
+          )}
         </ActionsContainer>
       )}
     </Wrapper>

packages/client/modules/demo/initDB.ts

@@ -302,7 +302,8 @@ const initDemoOrg = () => {
       suggestGroups: false,
       teamsLimit: false,
       noPromptToJoinOrg: false,
-      AIGeneratedDiscussionPrompt: false
+      AIGeneratedDiscussionPrompt: false,
+      meetingInception: false
     },
     showConversionModal: false
   } as const
@@ -481,6 +482,10 @@ export class DemoDiscussion {
   id: string
   thread = new DemoDiscussionThread()
   commentCount = 0
+  team = {
+    id: demoTeamId,
+    organization: initDemoOrg()
+  }
   constructor(reflectionGroupId: string) {
     this.createdAt = new Date().toJSON()
     this.id = `discussion:${reflectionGroupId}`

packages/server/graphql/private/typeDefs/updateOrgFeatureFlag.graphql

@@ -13,6 +13,7 @@ enum OrganizationFeatureFlagsEnum {
   teamInsights
   oneOnOne
   singleColumnStandups
+  meetingInception
 }
 
 extend type Mutation {

packages/server/graphql/public/typeDefs/Organization.graphql

@@ -189,4 +189,5 @@ type OrganizationFeatureFlags {
   teamInsights: Boolean!
   oneOnOne: Boolean!
   singleColumnStandups: Boolean!
+  meetingInception: Boolean!
 }

packages/server/graphql/public/typeDefs/_legacy.graphql

@@ -2738,6 +2738,11 @@ type Discussion {
   teamId: ID!
   meetingId: ID!
 
+  """
+  Team
+  """
+  team: Team!
+
   """
   time the thread was created
   """

packages/server/graphql/public/types/OrganizationFeatureFlags.ts

@@ -11,7 +11,8 @@ const OrganizationFeatureFlags: OrganizationFeatureFlagsResolvers = {
   teamsLimit: ({teamsLimit}) => !!teamsLimit,
   teamInsights: ({teamInsights}) => !!teamInsights,
   oneOnOne: ({oneOnOne}) => !!oneOnOne,
-  singleColumnStandups: ({singleColumnStandups}) => !!singleColumnStandups
+  singleColumnStandups: ({singleColumnStandups}) => !!singleColumnStandups,
+  meetingInception: ({meetingInception}) => !!meetingInception
 }
 
 export default OrganizationFeatureFlags

packages/server/graphql/types/Discussion.ts

@@ -23,6 +23,7 @@ import GraphQLISO8601Type from './GraphQLISO8601Type'
 import NewMeetingStage from './NewMeetingStage'
 import {ThreadableConnection} from './Threadable'
 import User from './User'
+import Team from './Team'
 
 const Discussion = new GraphQLObjectType<any, GQLContext>({
   name: 'Discussion',
@@ -34,6 +35,12 @@ const Discussion = new GraphQLObjectType<any, GQLContext>({
     teamId: {
       type: new GraphQLNonNull(GraphQLID)
     },
+    team: {
+      type: new GraphQLNonNull(Team),
+      resolve: ({teamId}, _args: unknown, {dataLoader}) => {
+        return dataLoader.get('teams').load(teamId)
+      }
+    },
     meetingId: {
       type: new GraphQLNonNull(GraphQLID)
     },