-
Notifications
You must be signed in to change notification settings - Fork 358
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: Improve the UI/UX for GitHub integrations (#3907)
- Loading branch information
1 parent
48ac76c
commit f624223
Showing
20 changed files
with
652 additions
and
376 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
Oops, something went wrong.