Added IntegrationProvider, IntegrationToken tables, GitLab auth, migrated Mattermost to the new data format

codegen.json

@@ -1,16 +1,17 @@
 {
-  "schema": "packages/server/utils/githubSchema.graphql",
-  "documents": "packages/server/utils/githubQueries/*.graphql",
+  "config": {
+    "content": "// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-nocheck"
+  },
   "generates": {
     "packages/server/types/githubTypes.ts": {
-      "plugins": [
-        "typescript",
-        "typescript-operations",
-        "add"
-      ],
-      "config": {
-        "content": "// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-nocheck"
-      }
+      "schema": "packages/server/utils/githubSchema.graphql",
+      "documents": "packages/server/utils/githubQueries/*.graphql",
+      "plugins": ["typescript", "typescript-operations", "add"]
+    },
+    "packages/server/types/gitlabTypes.ts": {
+      "schema": "packages/server/graphql/nestedSchema/GitLab/gitlabSchema.graphql",
+      "documents": "packages/server/graphql/nestedSchema/GitLab/queries/*.graphql",
+      "plugins": ["typescript", "typescript-operations", "add"]
     }
   }
 }

packages/client/components/GitLabProviderLogo.tsx

@@ -0,0 +1,10 @@
+import styled from '@emotion/styled'
+import logo from '../styles/theme/images/graphics/gitlab-icon-rgb.svg'
+
+const GitLabProviderLogo = styled('div')({
+  background: `url("${logo}")`,
+  height: 48,
+  width: 48
+})
+
+export default GitLabProviderLogo

packages/client/components/GitLabSVG.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+
+const GitLabSVG = React.memo(() => {
+  return (
+    <svg
+      version='1.1'
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <g transform='matrix(1.3333 0 0 -1.3333 0 745.33)'>
+        <g transform='matrix(.0053314 0 0 .0053314 -6.6229 535.81)'>
+          <path d='m2930.3 1240.2 621.99 1913.2h-1243.1l621.08-1913.2' fill='#e33426' />
+          <path
+            d='m1438 3153.4-189.42-581.26c-17.13-52.78 1.37-111.04 46.61-143.94l1635.1-1188-1492.3 1913.2'
+            fill='#f79818'
+          />
+          <path
+            d='m1438 3153.4h871.2l-374.94 1152.2c-19.19 58.95-102.82 58.95-122.7 0l-373.56-1152.2'
+            fill='#e33426'
+          />
+          <path
+            d='m4423.5 3153.4 188.72-581.26c17.14-52.78-1.37-111.04-46.61-143.94l-1635.3-1188 1493.2 1913.2'
+            fill='#f79818'
+          />
+          <path
+            d='m4423.5 3153.4h-871.21l374.25 1152.2c19.2 58.95 102.82 58.95 122.7 0l374.26-1152.2'
+            fill='#e33426'
+          />
+          <path d='m2930.3 1240.2 621.99 1913.2h871.21z' fill='#f25923' />
+          <path d='m2930.3 1240.2-1492.3 1913.2h871.2z' fill='#f25923' />
+        </g>
+      </g>
+    </svg>
+  )
+})
+
+export default GitLabSVG

packages/client/hooks/useMenu.ts

@@ -33,7 +33,15 @@ const useMenu = <T extends HTMLElement = HTMLButtonElement>(
   if (originCoords) {
     ;(originRef as any).current = {getBoundingClientRect: () => originCoords} as RectElement
   }
-  const {portal, closePortal, togglePortal, portalStatus, setPortalStatus, openPortal} = usePortal({
+  const {
+    portal,
+    closePortal,
+    openPortal,
+    portalStatus,
+    terminatePortal,
+    togglePortal,
+    setPortalStatus
+  } = usePortal({
     id,
     onOpen,
     onClose,
@@ -60,14 +68,15 @@ const useMenu = <T extends HTMLElement = HTMLButtonElement>(
   )
   const menuProps = {portalStatus, closePortal, isDropdown}
   return {
-    togglePortal,
-    originRef,
-    menuPortal,
-    menuProps,
     loadingDelay,
     loadingWidth,
+    menuPortal,
+    menuProps,
+    openPortal,
+    originRef,
     portalStatus,
-    openPortal
+    terminatePortal,
+    togglePortal
   }
 }
 

packages/client/modules/demo/DemoUser.ts

@@ -8,7 +8,8 @@ export default class DemoUser {
   createdAt = new Date().toJSON()
   email: string
   featureFlags = {
-    jira: false
+    gitlab: false,
+    video: false
   }
   facilitatorUserId: string
   facilitatorName: string

packages/client/modules/teamDashboard/components/ProviderList/ProviderList.tsx

@@ -6,6 +6,7 @@ import graphql from 'babel-plugin-relay/macro'
 import SettingsWrapper from '../../../../components/Settings/SettingsWrapper'
 import AtlassianProviderRow from '../ProviderRow/AtlassianProviderRow'
 import GitHubProviderRow from '../ProviderRow/GitHubProviderRow'
+import GitLabProviderRow from '../ProviderRow/GitLabProviderRow'
 import MattermostProviderRow from '../ProviderRow/MattermostProviderRow'
 import SlackProviderRow from '../ProviderRow/SlackProviderRow'
 
@@ -21,10 +22,14 @@ const StyledWrapper = styled(SettingsWrapper)({
 
 const ProviderList = (props: Props) => {
   const {viewer, retry, teamId} = props
+  const {
+    featureFlags: {gitlab: allowGitlab}
+  } = viewer
   return (
     <StyledWrapper>
       <AtlassianProviderRow teamId={teamId} retry={retry} viewer={viewer} />
       <GitHubProviderRow teamId={teamId} viewer={viewer} />
+      {allowGitlab && <GitLabProviderRow teamId={teamId} viewerRef={viewer} />}
       <MattermostProviderRow teamId={teamId} viewerRef={viewer} />
       <SlackProviderRow teamId={teamId} viewer={viewer} />
     </StyledWrapper>
@@ -36,8 +41,13 @@ export default createFragmentContainer(ProviderList, {
     fragment ProviderList_viewer on User {
       ...AtlassianProviderRow_viewer
       ...GitHubProviderRow_viewer
+      ...GitLabProviderRow_viewer
       ...MattermostProviderRow_viewer
       ...SlackProviderRow_viewer
+
+      featureFlags {
+        gitlab
+      }
     }
   `
 })

packages/client/modules/teamDashboard/components/ProviderRow/GitLabConfigMenu.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import useAtmosphere from '../../../../hooks/useAtmosphere'
+import {MenuProps} from '../../../../hooks/useMenu'
+import {MenuMutationProps} from '../../../../hooks/useMutationProps'
+import RemoveIntegrationTokenMutation from '../../../../mutations/RemoveIntegrationTokenMutation'
+import Menu from '../../../../components/Menu'
+import MenuItem from '../../../../components/MenuItem'
+
+interface Props {
+  menuProps: MenuProps
+  mutationProps: MenuMutationProps
+  providerId: string
+  teamId: string
+  terminatePortal: () => void
+}
+
+const GitLabConfigMenu = (props: Props) => {
+  const {menuProps, mutationProps, providerId, teamId, terminatePortal} = props
+  const {onError, onCompleted, submitMutation, submitting} = mutationProps
+  const atmosphere = useAtmosphere()
+
+  const removeGitLabAuth = () => {
+    if (submitting) return
+    submitMutation()
+    RemoveIntegrationTokenMutation(atmosphere, {providerId, teamId}, {onCompleted, onError})
+    // Our parent component does not unmount, and it often re-renders before the CSS menu transition
+    // can complete. We nuke the portal here to ensure the menu is closed.
+    terminatePortal()
+  }
+  return (
+    <Menu ariaLabel={'Configure your GitLab integration'} {...menuProps}>
+      <MenuItem label='Remove GitLab' onClick={removeGitLabAuth} />
+    </Menu>
+  )
+}
+
+export default GitLabConfigMenu