feat(jira-server): Allow searching for issues in Sprint Poker (#6406)

* render list of gitlab issues

* use usePaginationFragment

* increase default value for usePaginationFragment

* implement GitLabScopingSearchResultItem

* add GitLabScopingSelectAllIssues

* can add and remove gitlab issues in scope phase

* add UpdatePokerScopeMutation gitlab optimistic updater

* able to select all issues

* clean up type errors

* add projects name alias to rootSchema

* include projectIds in search query

* return iid from GitLabIssueId

* sort projects by lastActivityAt

* implement fetchGitLabProjects

* implement gitlab issue menu

* implement NewGitLabIssueMenuRoot instead of using useAllIntegrations

* load next if projects dont have any issues

* update comment

* remove gitlab menu root and use defaultProjects query to populate menu

* increase projectsFirst from 10 to 20

* query all gitlab projects

* chore(comment): how to extend BaseTaskIntegration

* able to create a new gitlab issue

* use GitLabServerManager and implement parseWebPath

* fix undefined baseUri

* changed taskIntegrationGitLab and GitLabId to use providerId

* lowercase gitlabRequest to be consistent with gh

* add handle create gitlab issue

* add info fragment and return data instead of data.issue

* add serverBaseUrl

* adjusted root schema and can now render projects in input menu again

* clean up update poker scope and create task gitlab

* fix ts errors

* add gitlab query types

* add fullPath to gitLab issue edge if exists

* get nodes appearing on insert

* get gitlab issue title in create task updater

* include webUrl in createTask query so user can click on newly create issue url

* add first and sort to allProjects query

* rename GitLabRepo to GitLabProject

* pass meetingId to issue input rather than querying it

* add gitlab search query

* filter by gitlab search query

* refactor to hooks

* query projects from project filter menu

* remove __typename and resolveTypes

* update UpdatePokerScopeMutation to fix selectAll bug

* render projects in filter menu

* use fullPath in gitlab menu and adjust max width

* refactor gitlab search query from string to object with projectIds

* selecting a project in the filter menu adds the item to selectedProjectsFullPath

* selecting a project filters the results

* add search icon

* add search icon

* remove searchQuery from scoping results query

* clean-up return statement in fetchGitLabProjects

* remove alias

* make selectedProjectIds nullable

* add search to issue args

* include search string when adding new gitlab issue

* refactor search query to a gql object

* remove useLoadNextOnScrollBottom and increase default projects first

* merge with master

* fix selectedProjects type err

* add search string to differentiate project menu query and include ids in project connection so we can add issues with a filter

* use react-swipeable-views workaround

* add _xGitLabProject resolver

* merge with master

* remove resolverTypes and gitlabTypes

* map over tabs instead of contents

* implement new scope search ui in gitlab

* refactor gitlabSearchQuery from selectedProjectsIds to selectedProjects

* selected projects showing up in current filters

* truncate current filters

* add new scope search to jira

* show jira project names

* improve current filters positioning

* remove gitlab types

* implement new scope search ui in parabol integration

* implement new scope search bar ui in github

* change filter var to status

* query projects from GitLabIntegration and remove fullPath from gitlab search query

* refactor scoping results query to usePagination and add alias to new issue query so it is not affected by parent query filtering

* fix(gitlab): add proper client-side alias handling (#6361)

* resolve to aliased fields

* resolve to aliased fields

* make poker input menu a dropdown and fix width

* refactor baseTabs to include Component

* create a single source of truth for gitlab issue args

* add viewerMeetingMember check and remove selectedProjectsIds resolver

* remove refetchable from gitlab scoping results query

* make selectedProjectsIds null if empty array

* use optional chaining rather than destructuring many vars

* feat(sprint-poker): GitLab issue is visible in Estimate phase (#6355)

* refactor PokerEstimateHeaderCard to make PokerEstimateHeaderCardContent reusable

* adding commit to play by the gh title rules

* use nullish coalescing instead of logical or

* spread headerFields into PokerEstimateHeaderCardContent

* Make abstract versions of some poker scope search components

* Filter button

* Jira Server filter menu

* current filters

* JQL and projects filter

* Remove console log

* Tweak code style

* JiraScopingSearchHistoryToggle

* JiraScopingSearchInput

* Change ariaLabel

* Fix types

* Tweak variables

* Tweak code style

* Validate search string

Co-authored-by: Nick O'Ferrall <[email protected]>
Co-authored-by: Matt Krick <[email protected]>

packages/client/clientSchema.graphql

@@ -25,6 +25,7 @@ extend type PokerMeeting {
   githubSearchQuery: GitHubSearchQuery!
   gitlabSearchQuery: GitLabSearchQuery!
   jiraSearchQuery: JiraSearchQuery!
+  jiraServerSearchQuery: JiraSearchQuery!
   parabolSearchQuery: ParabolSearchQuery!
   azureDevOpsSearchQuery: AzureDevOpsSearchQuery!
 }

packages/client/components/AvatarInput.tsx

@@ -1,5 +1,5 @@
-import React, {Component, lazy, Suspense} from 'react'
 import styled from '@emotion/styled'
+import React, {Component, lazy, Suspense} from 'react'
 import RaisedButton from './RaisedButton'
 import StyledError from './StyledError'
 

packages/client/components/FilterButton.tsx

@@ -0,0 +1,37 @@
+import styled from '@emotion/styled'
+import React, {forwardRef, Ref} from 'react'
+import {PALETTE} from '../styles/paletteV3'
+import {ICON_SIZE} from '../styles/typographyV2'
+import FlatButton from './FlatButton'
+import Icon from './Icon'
+
+const StyledButton = styled(FlatButton)({
+  height: 24,
+  marginLeft: 4,
+  padding: 0,
+  width: 24,
+  background: PALETTE.SKY_500,
+  '&:hover': {
+    background: PALETTE.SKY_500
+  }
+})
+
+const FilterIcon = styled(Icon)({
+  color: PALETTE.WHITE,
+  fontSize: ICON_SIZE.MD18
+})
+
+interface Props {
+  onClick: () => void
+}
+
+const FilterButton = forwardRef((props: Props, ref: Ref<HTMLButtonElement>) => {
+  const {onClick} = props
+  return (
+    <StyledButton onClick={onClick} ref={ref}>
+      <FilterIcon>filter_list</FilterIcon>
+    </StyledButton>
+  )
+})
+
+export default FilterButton

packages/client/components/GitHubScopingSearchFilterToggle.tsx

@@ -1,31 +1,11 @@
-import styled from '@emotion/styled'
 import graphql from 'babel-plugin-relay/macro'
 import React from 'react'
 import {useFragment} from 'react-relay'
 import {MenuPosition} from '../hooks/useCoords'
 import useMenu from '../hooks/useMenu'
-import {PALETTE} from '../styles/paletteV3'
-import {ICON_SIZE} from '../styles/typographyV2'
 import lazyPreload from '../utils/lazyPreload'
 import {GitHubScopingSearchFilterToggle_meeting$key} from '../__generated__/GitHubScopingSearchFilterToggle_meeting.graphql'
-import FlatButton from './FlatButton'
-import Icon from './Icon'
-
-const StyledButton = styled(FlatButton)({
-  height: 24,
-  marginLeft: 4,
-  padding: 0,
-  width: 24,
-  background: PALETTE.SKY_500,
-  '&:hover': {
-    background: PALETTE.SKY_500
-  }
-})
-
-const FilterIcon = styled(Icon)({
-  color: PALETTE.WHITE,
-  fontSize: ICON_SIZE.MD18
-})
+import FilterButton from './FilterButton'
 
 const GitHubScopingSearchFilterMenuRoot = lazyPreload(
   () =>
@@ -56,9 +36,7 @@ const GitHubScopingSearchFilterToggle = (props: Props) => {
   })
   return (
     <>
-      <StyledButton onClick={togglePortal} ref={originRef}>
-        <FilterIcon>filter_list</FilterIcon>
-      </StyledButton>
+      <FilterButton onClick={togglePortal} ref={originRef} />
       {menuPortal(
         <GitHubScopingSearchFilterMenuRoot
           teamId={teamId}

packages/client/components/GitHubScopingSearchResults.tsx

@@ -7,6 +7,7 @@ import useAtmosphere from '../hooks/useAtmosphere'
 import useGetUsedServiceTaskIds from '../hooks/useGetUsedServiceTaskIds'
 import useLoadNextOnScrollBottom from '../hooks/useLoadNextOnScrollBottom'
 import PersistGitHubSearchQueryMutation from '../mutations/PersistGitHubSearchQueryMutation'
+import GitHubIssueId from '../shared/gqlIds/GitHubIssueId'
 import {SprintPokerDefaults} from '../types/constEnums'
 import {GQLType} from '../types/generics'
 import getNonNullEdges from '../utils/getNonNullEdges'
@@ -16,11 +17,11 @@ import {GitHubScopingSearchResultsQuery} from '../__generated__/GitHubScopingSea
 import {GitHubScopingSearchResults_meeting$key} from '../__generated__/GitHubScopingSearchResults_meeting.graphql'
 import {GitHubScopingSearchResults_query$key} from '../__generated__/GitHubScopingSearchResults_query.graphql'
 import Ellipsis from './Ellipsis/Ellipsis'
-import GitHubScopingSearchResultItem from './GitHubScopingSearchResultItem'
 import GitHubScopingSelectAllIssues from './GitHubScopingSelectAllIssues'
 import IntegrationScopingNoResults from './IntegrationScopingNoResults'
 import NewGitHubIssueInput from './NewGitHubIssueInput'
 import NewIntegrationRecordButton from './NewIntegrationRecordButton'
+import ScopingSearchResultItem from './ScopingSearchResultItem'
 
 const ResultScroller = styled('div')({
   overflow: 'auto'
@@ -99,9 +100,13 @@ const GitHubScopingSearchResults = (props: Props) => {
                           __typename
                           ... on _xGitHubIssue {
                             ...GitHubScopingSelectAllIssues_issues
-                            ...GitHubScopingSearchResultItem_issue
                             id
                             title
+                            number
+                            repository {
+                              nameWithOwner
+                            }
+                            url
                           }
                         }
                       }
@@ -203,13 +208,21 @@ const GitHubScopingSearchResults = (props: Props) => {
           />
         )}
         {issues.map((node) => {
+          const {repository, number, title, url} = node
+          const {nameWithOwner} = repository
+          const linkText = `#${number} ${nameWithOwner}`
           return (
-            <GitHubScopingSearchResultItem
+            <ScopingSearchResultItem
               key={node.id}
-              issue={node}
+              service={'github'}
               usedServiceTaskIds={usedServiceTaskIds}
+              serviceTaskId={GitHubIssueId.join(nameWithOwner, number)}
               meetingId={meetingId}
               persistQuery={persistQuery}
+              summary={title}
+              url={url}
+              linkText={linkText}
+              linkTitle={linkText}
             />
           )
         })}

packages/client/components/GitLabScopingSearchFilterToggle.tsx

@@ -1,31 +1,11 @@
-import styled from '@emotion/styled'
 import graphql from 'babel-plugin-relay/macro'
 import React from 'react'
 import {useFragment} from 'react-relay'
 import {MenuPosition} from '../hooks/useCoords'
 import useMenu from '../hooks/useMenu'
-import {PALETTE} from '../styles/paletteV3'
-import {ICON_SIZE} from '../styles/typographyV2'
 import lazyPreload from '../utils/lazyPreload'
 import {GitLabScopingSearchFilterToggle_meeting$key} from '../__generated__/GitLabScopingSearchFilterToggle_meeting.graphql'
-import FlatButton from './FlatButton'
-import Icon from './Icon'
-
-const StyledButton = styled(FlatButton)({
-  height: 24,
-  marginLeft: 4,
-  padding: 0,
-  width: 24,
-  background: PALETTE.SKY_500,
-  '&:hover': {
-    background: PALETTE.SKY_500
-  }
-})
-
-const FilterIcon = styled(Icon)({
-  color: PALETTE.WHITE,
-  fontSize: ICON_SIZE.MD18
-})
+import FilterButton from './FilterButton'
 
 const GitLabScopingSearchFilterMenuRoot = lazyPreload(
   () =>
@@ -56,9 +36,7 @@ const GitLabScopingSearchFilterToggle = (props: Props) => {
   })
   return (
     <>
-      <StyledButton onClick={togglePortal} ref={originRef}>
-        <FilterIcon>filter_list</FilterIcon>
-      </StyledButton>
+      <FilterButton onClick={togglePortal} ref={originRef} />
       {menuPortal(
         <GitLabScopingSearchFilterMenuRoot
           teamId={teamId}

packages/client/components/InvitationLink.tsx

@@ -1,9 +1,9 @@
+import graphql from 'babel-plugin-relay/macro'
 import React from 'react'
 import {PreloadedQuery, usePreloadedQuery} from 'react-relay'
-import graphql from 'babel-plugin-relay/macro'
 import {InvitationLinkQuery} from '../__generated__/InvitationLinkQuery.graphql'
-import TeamInvitationMeetingAbstract from './TeamInvitationMeetingAbstract'
 import InvitationLinkDialog from './InvitationLinkDialog'
+import TeamInvitationMeetingAbstract from './TeamInvitationMeetingAbstract'
 
 interface Props {
   queryRef: PreloadedQuery<InvitationLinkQuery>