fix: Improve the UI/UX for GitHub integrations (#3907)

frontend/common/constants.ts

@@ -435,6 +435,10 @@ export default {
       'TRAITS_ID': 150,
     },
   },
+  githubType: {
+    githubIssue: 'GitHub Issue',
+    githubPR: 'Github PR',
+  },
   modals: {
     'PAYMENT': 'Payment Modal',
   },
@@ -472,6 +476,10 @@ export default {
   ],
   projectPermissions: (perm: string) =>
     `To use this feature you need the <i>${perm}</i> permission for this project.<br/>Please contact a member of this project who has administrator privileges.`,
+  resourceTypes: {
+    GITHUB_ISSUE: { id: 1, label: 'GitHub Issue', type: 'GITHUB' },
+    GITHUB_PR: { id: 2, label: 'GitHub PR', type: 'GITHUB' },
+  },
   roles: {
     'ADMIN': 'Organisation Administrator',
     'USER': 'User',

frontend/common/types/responses.ts

@@ -111,8 +111,8 @@ export type ExternalResource = {
   id?: number
   url: string
   type: string
-  project: number
-  status: null | string
+  project?: number
+  metadata: null | { status: string }
   feature: number
 }
 
@@ -769,7 +769,7 @@ export type Res = {
   supportedContentType: ContentType[]
   externalResource: PagedResponse<ExternalResource>
   githubIntegrations: PagedResponse<githubIntegration>
-  githubRepository: PagedResponse<GithubRepository> | { data: { id: string } }
+  githubRepository: PagedResponse<GithubRepository>
   githubIssues: Issue[]
   githubPulls: PullRequest[]
   githubRepos: GithubPaginatedRepos<Repository>

frontend/web/components/DeleteGithubIntegration.tsx

@@ -0,0 +1,64 @@
+import React, { FC } from 'react'
+import Button from './base/forms/Button'
+import { useDeleteGithubIntegrationMutation } from 'common/services/useGithubIntegration'
+
+type DeleteGithubIntegrationType = {
+  organisationId: string
+  githubId: string
+}
+
+const DeleteGithubIntegration: FC<DeleteGithubIntegrationType> = ({
+  githubId,
+  organisationId,
+}) => {
+  const [deleteGithubIntegration] = useDeleteGithubIntegrationMutation()
+
+  return (
+    <Button
+      id='delete-integration'
+      theme='danger'
+      data-test='delete-integration'
+      onClick={() =>
+        openModal2(
+          'Delete Github Integration',
+          <div>
+            <div>Are you sure you want to remove your GitHub integration?</div>
+            <div>
+              If you proceed, you will need to uninstall the application from
+              your GitHub organization in order to integrate it again.
+            </div>
+            <div className='text-right'>
+              <Button
+                className='mr-2'
+                onClick={() => {
+                  closeModal2()
+                }}
+              >
+                Cancel
+              </Button>
+              <Button
+                theme='danger'
+                onClick={() => {
+                  deleteGithubIntegration({
+                    github_integration_id: githubId,
+                    organisation_id: organisationId,
+                  }).then(() => {
+                    closeModal2()
+                    closeModal()
+                  })
+                }}
+              >
+                Delete
+              </Button>
+            </div>
+          </div>,
+        )
+      }
+      size='small'
+    >
+      Delete Integration
+    </Button>
+  )
+}
+
+export default DeleteGithubIntegration

frontend/web/components/ExternalResourcesLinkTab.tsx

@@ -0,0 +1,162 @@
+import React, { FC, useState } from 'react'
+import MyRepositoriesSelect from './MyRepositoriesSelect'
+import ExternalResourcesTable, {
+  ExternalResourcesTableType,
+} from './ExternalResourcesTable'
+import { ExternalResource } from 'common/types/responses'
+import MyIssuesSelect from './MyIssuesSelect'
+import MyPullRequestsSelect from './MyPullRequestsSelect'
+import { useCreateExternalResourceMutation } from 'common/services/useExternalResource'
+import Constants from 'common/constants'
+import Button from './base/forms/Button'
+
+type ExternalResourcesLinkTabType = {
+  githubId: string
+  organisationId: string
+  featureId: string
+  projectId: string
+}
+
+type AddExternalResourceRowType = ExternalResourcesTableType & {
+  linkedExternalResources?: ExternalResource[]
+}
+
+type GitHubStatusType = {
+  value: number
+  label: string
+}
+
+const AddExternalResourceRow: FC<AddExternalResourceRowType> = ({
+  featureId,
+  linkedExternalResources,
+  organisationId,
+  projectId,
+  repoName,
+  repoOwner,
+}) => {
+  const [externalResourceType, setExternalResourceType] = useState<string>('')
+  const [featureExternalResource, setFeatureExternalResource] =
+    useState<string>('')
+
+  const [createExternalResource] = useCreateExternalResourceMutation()
+  const githubTypes = Object.values(Constants.resourceTypes).filter(
+    (v) => v.type === 'GITHUB',
+  )
+  return (
+    <Row>
+      <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>
+      <Flex className='table-column px-3'>
+        <Flex className='ml-4'>
+          {externalResourceType ==
+          Constants.resourceTypes.GITHUB_ISSUE.label ? (
+            <MyIssuesSelect
+              orgId={organisationId}
+              onChange={(v) => setFeatureExternalResource(v)}
+              repoOwner={repoOwner}
+              repoName={repoName}
+              linkedExternalResources={linkedExternalResources!}
+            />
+          ) : externalResourceType ==
+            Constants.resourceTypes.GITHUB_PR.label ? (
+            <MyPullRequestsSelect
+              orgId={organisationId}
+              onChange={(v) => setFeatureExternalResource(v)}
+              repoOwner={repoOwner}
+              repoName={repoName}
+              linkedExternalResources={linkedExternalResources!}
+            />
+          ) : (
+            <></>
+          )}
+        </Flex>
+      </Flex>
+      <div className='table-column text-center' style={{ width: '80px' }}>
+        <Button
+          className='text-right'
+          theme='primary'
+          disabled={!externalResourceType || !featureExternalResource}
+          onClick={() => {
+            createExternalResource({
+              body: {
+                feature: parseInt(featureId),
+                metadata: { status: 'open' },
+                type: externalResourceType.toUpperCase().replace(/\s+/g, '_'),
+                url: featureExternalResource,
+              },
+              feature_id: featureId,
+              project_id: projectId,
+            }).then(() => {
+              toast('External Resource Added')
+            })
+          }}
+        >
+          Save
+        </Button>
+      </div>
+    </Row>
+  )
+}
+
+const ExternalResourcesLinkTab: FC<ExternalResourcesLinkTabType> = ({
+  featureId,
+  githubId,
+  organisationId,
+  projectId,
+}) => {
+  const [repoName, setRepoName] = useState<string>('')
+  const [repoOwner, setRepoOwner] = useState<string>('')
+  const [selectedResources, setSelectedResources] =
+    useState<ExternalResource[]>()
+
+  return (
+    <>
+      <h5>GitHub Issues and Pull Requests linked</h5>
+      <label className='cols-sm-2 control-label'>
+        {' '}
+        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
+            featureId={featureId}
+            projectId={projectId}
+            organisationId={organisationId}
+            repoName={repoName}
+            repoOwner={repoOwner}
+            linkedExternalResources={selectedResources}
+          />
+        )}
+      </FormGroup>
+      <ExternalResourcesTable
+        featureId={featureId}
+        projectId={projectId}
+        organisationId={organisationId}
+        repoOwner={repoOwner}
+        repoName={repoName}
+        setSelectedResources={(r: ExternalResource[]) =>
+          setSelectedResources(r)
+        }
+      />
+    </>
+  )
+}
+
+export default ExternalResourcesLinkTab