Skip to content

Commit

Permalink
feat: Improve Github integration (#4498)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kyle-ssg
kyle-ssg authored Sep 4, 2024
1 parent 7140dc3 commit 65600a7
Show file tree
Hide file tree
Showing 8 changed files with 205 additions and 457 deletions.
18 changes: 13 additions & 5 deletions frontend/common/useInfiniteScroll.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { PagedRequest } from './types/requests'
import { PagedResponse } from './types/responses'
import { QueryDefinition } from '@reduxjs/toolkit/query'
import useThrottle from './useThrottle'
import { SubscriptionOptions } from '@reduxjs/toolkit/src/query/core/apiState'

const useInfiniteScroll = <
REQ extends PagedRequest<{}>,
Expand All @@ -12,17 +13,24 @@ const useInfiniteScroll = <
useGetDataListQuery: UseQuery<QueryDefinition<REQ, any, any, RES>>,
queryParameters: REQ,
throttle = 100,
queryOptions?: SubscriptionOptions & {
skip?: boolean
refetchOnMountOrArgChange?: boolean | number
},
) => {
const [localPage, setLocalPage] = useState(1)
const [combinedData, setCombinedData] = useState<RES | null>(null)
const [loadingCombinedData, setLoadingCombinedData] = useState(false)
const [q, setQ] = useState('')

const queryResponse = useGetDataListQuery({
...queryParameters,
page: localPage,
q,
})
const queryResponse = useGetDataListQuery(
{
...queryParameters,
page: localPage,
q,
},
queryOptions,
)

useEffect(
() => {
Expand Down
183 changes: 39 additions & 144 deletions frontend/web/components/ExternalResourcesLinkTab.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@
import React, { FC, useState } from 'react'
import MyRepositoriesSelect from './MyRepositoriesSelect'
import ExternalResourcesTable, {
ExternalResourcesTableBase,
} from './ExternalResourcesTable'
import { ExternalResource, GithubResource } from 'common/types/responses'
import { GitHubResourceSelectProvider } from './GitHubResourceSelectProvider'
import { useCreateExternalResourceMutation } from 'common/services/useExternalResource'
import Constants from 'common/constants'
import Button from './base/forms/Button'
import GitHubResourcesSelect from './GitHubResourcesSelect'
import _ from 'lodash'
import AppActions from 'common/dispatcher/app-actions'

type ExternalResourcesLinkTabType = {
Expand All @@ -21,170 +17,69 @@ type ExternalResourcesLinkTabType = {
}

type AddExternalResourceRowType = ExternalResourcesTableBase & {
linkedExternalResources?: ExternalResource[]
selectedResources?: ExternalResource[]
environmentId: string
githubId: string
}

type GitHubStatusType = {
value: number
label: string
}

const AddExternalResourceRow: FC<AddExternalResourceRowType> = ({
const ExternalResourcesLinkTab: FC<ExternalResourcesLinkTabType> = ({
environmentId,
featureId,
linkedExternalResources,
githubId,
organisationId,
projectId,
repoName,
repoOwner,
}) => {
const [externalResourceType, setExternalResourceType] = useState<string>('')
const [featureExternalResource, setFeatureExternalResource] = useState<
GithubResource | undefined
>(undefined)
const [lastSavedResource, setLastSavedResource] = useState<
string | undefined
>(undefined)
const [createExternalResource] = useCreateExternalResourceMutation()
const githubTypes = Object.values(Constants.resourceTypes).filter(
(v) => v.type === 'GITHUB',
)
return (
<div className='mt-4'>
<Flex style={{ maxWidth: '170px' }}>
<Select
size='select-md'
placeholder={'Select Type'}
onChange={(v: GitHubStatusType) => setExternalResourceType(v.label)}
options={githubTypes.map((e) => {
return { label: e.label, value: e.id }
})}
/>
</Flex>
<Row className='mt-4'>
<Flex>
{externalResourceType && (
<GitHubResourceSelectProvider
lastSavedResource={lastSavedResource}
linkedExternalResources={linkedExternalResources!}
orgId={organisationId}
onChange={(v) => setFeatureExternalResource(v)}
repoOwner={repoOwner}
repoName={repoName}
githubResource={
(externalResourceType &&
(
_.find(_.values(Constants.resourceTypes), {
label: externalResourceType!,
}) as any
).resourceType) ||
''
}
>
<GitHubResourcesSelect
onChange={(v) => setFeatureExternalResource(v)}
lastSavedResource={lastSavedResource}
/>
</GitHubResourceSelectProvider>
)}
</Flex>
<div className='table-column text-center' style={{ width: '80px' }}>
<Button
className='text-right'
theme='primary'
disabled={!externalResourceType || !featureExternalResource}
onClick={() => {
const type = Object.keys(Constants.resourceTypes).find(
(key: string) =>
Constants.resourceTypes[
key as keyof typeof Constants.resourceTypes
].label === externalResourceType,
)
if (type && featureExternalResource) {
createExternalResource({
body: {
feature: parseInt(featureId),
metadata: {
'draft': featureExternalResource.draft,
'merged': featureExternalResource.merged,
'state': featureExternalResource.state,
'title': featureExternalResource.title,
},
type: type,
url: featureExternalResource.html_url,
},
feature_id: featureId,
project_id: projectId,
}).then(() => {
toast('External Resource Added')
setLastSavedResource(featureExternalResource.html_url)
AppActions.refreshFeatures(parseInt(projectId), environmentId)
})
} else {
throw new Error('Invalid External Resource Data')
}
}}
>
Save
</Button>
</div>
</Row>
</div>
)
}

const ExternalResourcesLinkTab: FC<ExternalResourcesLinkTabType> = ({
environmentId,
featureId,
githubId,
organisationId,
projectId,
}) => {
const [repoName, setRepoName] = useState<string>('')
const [repoOwner, setRepoOwner] = useState<string>('')
const [createExternalResource] = useCreateExternalResourceMutation()
const [resourceType, setResourceType] = useState(githubTypes[0].resourceType)
const [selectedResources, setSelectedResources] =
useState<ExternalResource[]>()

const addResource = (featureExternalResource: GithubResource) => {
const type = Object.keys(Constants.resourceTypes).find(
(key: string) =>
Constants.resourceTypes[key as keyof typeof Constants.resourceTypes]
.resourceType === resourceType,
)
createExternalResource({
body: {
feature: parseInt(featureId),
metadata: {
'draft': featureExternalResource.draft,
'merged': featureExternalResource.merged,
'state': featureExternalResource.state,
'title': featureExternalResource.title,
},
type: type,
url: featureExternalResource.html_url,
},
feature_id: featureId,
project_id: projectId,
}).then(() => {
toast('External Resource Added')
AppActions.refreshFeatures(parseInt(projectId), environmentId)
})
}
return (
<>
<h5>GitHub Issues and Pull Requests linked</h5>
<GitHubResourcesSelect
githubId={githubId}
resourceType={resourceType}
setResourceType={setResourceType}
onChange={addResource as any}
value={selectedResources?.map((v) => v.url!)}
orgId={organisationId}
/>
<ExternalResourcesTable
featureId={featureId}
projectId={projectId}
organisationId={organisationId}
repoOwner={repoOwner}
repoName={repoName}
setSelectedResources={(r: ExternalResource[]) =>
setSelectedResources(r)
}
/>
<label className='cols-sm-2 control-label mt-4'>
{' '}
Link new Issue / Pull Request{' '}
</label>
<FormGroup>
<MyRepositoriesSelect
githubId={githubId}
orgId={organisationId}
onChange={(v) => {
const repoData = v.split('/')
setRepoName(repoData[0])
setRepoOwner(repoData[1])
}}
/>
{repoName && repoOwner && (
<AddExternalResourceRow
environmentId={environmentId}
featureId={featureId}
projectId={projectId}
organisationId={organisationId}
repoName={repoName}
repoOwner={repoOwner}
linkedExternalResources={selectedResources}
/>
)}
</FormGroup>
</>
)
}
Expand Down
4 changes: 1 addition & 3 deletions frontend/web/components/ExternalResourcesTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@ export type ExternalResourcesTableBase = {
featureId: string
projectId: string
organisationId: string
repoName: string
repoOwner: string
}

export type ExternalResourcesTableType = ExternalResourcesTableBase & {
Expand Down Expand Up @@ -177,7 +175,7 @@ const ExternalResourcesTable: FC<ExternalResourcesTableType> = ({
/>
)}
renderNoResults={
<FormGroup className='text-center'>
<FormGroup className='text-center mt-4'>
You have no external resources linked for this feature.
</FormGroup>
}
Expand Down
106 changes: 0 additions & 106 deletions frontend/web/components/GitHubResourceSelectProvider.tsx
View file

This file was deleted.

Loading

0 comments on commit 65600a7

Please sign in to comment.