feat(sprint-poker): Push task to GitLab

packages/client/components/AddToGitLabMenuItem.tsx

@@ -0,0 +1,74 @@
+import styled from '@emotion/styled'
+import graphql from 'babel-plugin-relay/macro'
+import React, {forwardRef} from 'react'
+import {useFragment} from 'react-relay'
+import GitLabClientManager from '~/utils/GitLabClientManager'
+import useAtmosphere from '../hooks/useAtmosphere'
+import useMutationProps, {MenuMutationProps} from '../hooks/useMutationProps'
+import {ICON_SIZE} from '../styles/typographyV2'
+import {AddToGitLabMenuItem_GitLabIntegration$key} from '../__generated__/AddToGitLabMenuItem_GitLabIntegration.graphql'
+import GitLabSVG from './GitLabSVG'
+import MenuItem from './MenuItem'
+import MenuItemComponentAvatar from './MenuItemComponentAvatar'
+import MenuItemLabel from './MenuItemLabel'
+
+interface Props {
+  teamId: string
+  mutationProps: MenuMutationProps
+  gitlabRef: AddToGitLabMenuItem_GitLabIntegration$key
+}
+
+const MenuItemIcon = styled(MenuItemComponentAvatar)({
+  '& svg': {
+    display: 'block',
+    height: ICON_SIZE.MD18,
+    width: ICON_SIZE.MD18
+  }
+})
+
+const AddToGitLabMenuItem = forwardRef((props: Props, ref) => {
+  const {teamId, gitlabRef} = props
+  const mutationProps = useMutationProps()
+  const gitlab = useFragment(
+    graphql`
+      fragment AddToGitLabMenuItem_GitLabIntegration on GitLabIntegration {
+        cloudProvider {
+          id
+          clientId
+          serverBaseUrl
+        }
+      }
+    `,
+    gitlabRef
+  )
+  const atmosphere = useAtmosphere()
+  const {cloudProvider} = gitlab
+  if (!cloudProvider) return null
+  const {id: providerId, clientId, serverBaseUrl} = cloudProvider
+  const openOAuth = () => {
+    GitLabClientManager.openOAuth(
+      atmosphere,
+      providerId,
+      clientId,
+      serverBaseUrl,
+      teamId,
+      mutationProps
+    )
+  }
+  return (
+    <MenuItem
+      ref={ref}
+      label={
+        <MenuItemLabel>
+          <MenuItemIcon>
+            <GitLabSVG />
+          </MenuItemIcon>
+          {'Add GitLab integration'}
+        </MenuItemLabel>
+      }
+      onClick={openOAuth}
+    />
+  )
+})
+
+export default AddToGitLabMenuItem

packages/client/components/GitLabFieldDimensionDropdown.tsx

@@ -0,0 +1,89 @@
+import styled from '@emotion/styled'
+import graphql from 'babel-plugin-relay/macro'
+import React from 'react'
+import {useFragment} from 'react-relay'
+import {PALETTE} from '~/styles/paletteV3'
+import {MenuPosition} from '../hooks/useCoords'
+import useMenu from '../hooks/useMenu'
+import {ICON_SIZE} from '../styles/typographyV2'
+import {SprintPokerDefaults} from '../types/constEnums'
+import {GitLabFieldDimensionDropdown_stage$key} from '../__generated__/GitLabFieldDimensionDropdown_stage.graphql'
+import GitLabFieldMenu from './GitLabFieldMenu'
+import Icon from './Icon'
+import PlainButton from './PlainButton/PlainButton'
+
+interface Props {
+  clearError: () => void
+  isFacilitator: boolean
+  stageRef: GitLabFieldDimensionDropdown_stage$key
+  submitScore(): void
+}
+
+const Wrapper = styled(PlainButton)<{isFacilitator: boolean}>(({isFacilitator}) => ({
+  color: PALETTE.SLATE_700,
+  cursor: isFacilitator ? undefined : 'default',
+  display: 'flex',
+  paddingRight: isFacilitator ? undefined : 8,
+  userSelect: 'none',
+  ':hover,:focus,:active': {
+    opacity: isFacilitator ? '50%' : undefined
+  }
+}))
+
+const CurrentValue = styled('div')({
+  fontSize: 14
+})
+
+const StyledIcon = styled(Icon)<{isFacilitator: boolean}>(({isFacilitator}) => ({
+  fontSize: ICON_SIZE.MD18,
+  display: isFacilitator ? undefined : 'none'
+}))
+
+const labelLookup = {
+  [SprintPokerDefaults.SERVICE_FIELD_COMMENT]: SprintPokerDefaults.SERVICE_FIELD_COMMENT_LABEL,
+  [SprintPokerDefaults.SERVICE_FIELD_NULL]: SprintPokerDefaults.SERVICE_FIELD_NULL_LABEL
+}
+
+const GitLabFieldDimensionDropdown = (props: Props) => {
+  const {clearError, stageRef, isFacilitator, submitScore} = props
+  const stage = useFragment(
+    graphql`
+      fragment GitLabFieldDimensionDropdown_stage on EstimateStage {
+        ...GitLabFieldMenu_stage
+        finalScore
+        serviceField {
+          name
+        }
+      }
+    `,
+    stageRef
+  )
+  const {serviceField} = stage
+  const {name: serviceFieldName} = serviceField
+  const {togglePortal, menuPortal, originRef, menuProps} = useMenu<HTMLButtonElement>(
+    MenuPosition.UPPER_RIGHT,
+    {isDropdown: true}
+  )
+
+  const onClick = () => {
+    if (!isFacilitator) return
+    togglePortal()
+    clearError()
+  }
+
+  const label = labelLookup[serviceFieldName]
+
+  return (
+    <>
+      <Wrapper isFacilitator={isFacilitator} onClick={onClick} ref={originRef}>
+        <CurrentValue>{label}</CurrentValue>
+        <StyledIcon isFacilitator={isFacilitator}>{'expand_more'}</StyledIcon>
+      </Wrapper>
+      {menuPortal(
+        <GitLabFieldMenu menuProps={menuProps} stageRef={stage} submitScore={submitScore} />
+      )}
+    </>
+  )
+}
+
+export default GitLabFieldDimensionDropdown

packages/client/components/GitLabFieldMenu.tsx

@@ -0,0 +1,98 @@
+import graphql from 'babel-plugin-relay/macro'
+import React from 'react'
+import {useFragment} from 'react-relay'
+import useAtmosphere from '../hooks/useAtmosphere'
+import {MenuProps} from '../hooks/useMenu'
+import UpdateGitLabDimensionFieldMutation from '../mutations/UpdateGitLabDimensionFieldMutation'
+import {SprintPokerDefaults} from '../types/constEnums'
+import {GitLabFieldMenu_stage$key} from '../__generated__/GitLabFieldMenu_stage.graphql'
+import Menu from './Menu'
+import MenuItem from './MenuItem'
+
+interface Props {
+  menuProps: MenuProps
+  stageRef: GitLabFieldMenu_stage$key
+  submitScore(): void
+}
+
+const GitLabFieldMenu = (props: Props) => {
+  const {menuProps, stageRef, submitScore} = props
+  const atmosphere = useAtmosphere()
+  const stage = useFragment(
+    graphql`
+      fragment GitLabFieldMenu_stage on EstimateStage {
+        serviceField {
+          name
+        }
+        dimensionRef {
+          name
+        }
+        task {
+          integration {
+            ... on _xGitLabIssue {
+              __typename
+              id
+            }
+          }
+        }
+        meetingId
+      }
+    `,
+    stageRef
+  )
+  const {portalStatus, isDropdown, closePortal} = menuProps
+  const {serviceField, task, dimensionRef, meetingId} = stage
+  const {name: dimensionName} = dimensionRef
+  const {name: serviceFieldName} = serviceField
+  const defaults = [
+    SprintPokerDefaults.SERVICE_FIELD_COMMENT,
+    SprintPokerDefaults.SERVICE_FIELD_NULL
+  ] as string[]
+  const defaultActiveIdx = defaults.indexOf(serviceFieldName)
+
+  if (task?.integration?.__typename !== '_xGitLabIssue') return null
+  const {integration} = task
+  const {id: gid} = integration
+  const handleClick = (labelTemplate: string) => () => {
+    if (labelTemplate !== serviceFieldName) {
+      UpdateGitLabDimensionFieldMutation(
+        atmosphere,
+        {
+          dimensionName,
+          labelTemplate,
+          gid,
+          meetingId
+        },
+        {
+          onCompleted: submitScore,
+          onError: () => {
+            /* noop */
+          }
+        }
+      )
+    } else {
+      submitScore()
+    }
+    closePortal()
+  }
+
+  return (
+    <Menu
+      ariaLabel={'Select whether to publish estimate as a comment in GitLab'}
+      portalStatus={portalStatus}
+      isDropdown={isDropdown}
+      defaultActiveIdx={defaultActiveIdx}
+    >
+      <MenuItem
+        label={SprintPokerDefaults.SERVICE_FIELD_COMMENT_LABEL}
+        onClick={handleClick(SprintPokerDefaults.SERVICE_FIELD_COMMENT)}
+      />
+      <MenuItem
+        label={SprintPokerDefaults.SERVICE_FIELD_NULL_LABEL}
+        onClick={handleClick(SprintPokerDefaults.SERVICE_FIELD_NULL)}
+      />
+    </Menu>
+  )
+}
+
+export default GitLabFieldMenu

packages/client/components/IntegratedTaskContent.tsx

@@ -48,6 +48,14 @@ const IntegratedTaskContent = (props: Props) => {
         <div dangerouslySetInnerHTML={{__html: bodyHTML}} />
       </Content>
     )
+  } else if (integration.__typename === '_xGitLabIssue') {
+    const {descriptionHtml, title} = integration
+    return (
+      <Content>
+        <Summary>{title}</Summary>
+        {descriptionHtml && <div dangerouslySetInnerHTML={{__html: descriptionHtml}} />}
+      </Content>
+    )
   }
   return null
 }
@@ -69,6 +77,10 @@ export default createFragmentContainer(IntegratedTaskContent, {
           descriptionHTML
           summary
         }
+        ... on _xGitLabIssue {
+          descriptionHtml
+          title
+        }
       }
     }
   `

packages/client/components/PokerDimensionFinalScorePicker.tsx

@@ -7,6 +7,7 @@ import {Breakpoint} from '~/types/constEnums'
 import {PALETTE} from '../styles/paletteV3'
 import {PokerDimensionFinalScorePicker_stage$key} from '../__generated__/PokerDimensionFinalScorePicker_stage.graphql'
 import GitHubFieldDimensionDropdown from './GitHubFieldDimensionDropdown'
+import GitLabFieldDimensionDropdown from './GitLabFieldDimensionDropdown'
 import JiraFieldDimensionDropdown from './JiraFieldDimensionDropdown'
 import LinkButton from './LinkButton'
 import StyledError from './StyledError'
@@ -81,6 +82,7 @@ const PokerDimensionFinalScorePicker = (props: Props) => {
       fragment PokerDimensionFinalScorePicker_stage on EstimateStage {
         ...GitHubFieldDimensionDropdown_stage
         ...JiraFieldDimensionDropdown_stage
+        ...GitLabFieldDimensionDropdown_stage
         task {
           integration {
             __typename
@@ -96,7 +98,8 @@ const PokerDimensionFinalScorePicker = (props: Props) => {
   const titleByType = {
     _xGitHubIssue: 'GitHub',
     JiraIssue: 'Jira',
-    JiraServerIssue: 'Jira Server'
+    JiraServerIssue: 'Jira Server',
+    _xGitLabIssue: 'GitLab'
   }
   const title = titleByType[integrationType]
   const isDesktop = useBreakpoint(Breakpoint.SIDEBAR_LEFT)
@@ -123,7 +126,6 @@ const PokerDimensionFinalScorePicker = (props: Props) => {
               submitScore={submitScore}
             />
           )}
-
           {(integrationType === 'JiraIssue' || integrationType === 'JiraServerIssue') && (
             <JiraFieldDimensionDropdown
               clearError={clearError}
@@ -132,6 +134,14 @@ const PokerDimensionFinalScorePicker = (props: Props) => {
               submitScore={submitScore}
             />
           )}
+          {integrationType === '_xGitLabIssue' && (
+            <GitLabFieldDimensionDropdown
+              clearError={clearError}
+              stageRef={stage}
+              isFacilitator={isFacilitator}
+              submitScore={submitScore}
+            />
+          )}
         </ControlWrapper>
       </Mapper>
     </Wrapper>

packages/client/components/PokerDimensionValueControl.tsx

@@ -161,7 +161,6 @@ const PokerDimensionValueControl = (props: Props) => {
           />
         </MiniPokerCard>
         {!isFacilitator && <Label>{label}</Label>}
-
         <PokerDimensionFinalScorePicker
           canUpdate={isStale}
           stageRef={stage}