feat: Improve Github integration

frontend/common/useInfiniteScroll.ts

@@ -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<{}>,
@@ -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(
     () => {

frontend/web/components/ExternalResourcesLinkTab.tsx

@@ -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 = {
@@ -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>
     </>
   )
 }

frontend/web/components/ExternalResourcesTable.tsx

@@ -14,8 +14,6 @@ export type ExternalResourcesTableBase = {
   featureId: string
   projectId: string
   organisationId: string
-  repoName: string
-  repoOwner: string
 }
 
 export type ExternalResourcesTableType = ExternalResourcesTableBase & {
@@ -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>
         }