github/drone
5
0
Fork 0
mirror of https://github.com/harness/drone.git synced 2025-05-04 17:11:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add placeholders for PR page (#113)

Browse Source 
* Add placeholders for PR page

* Add placeholders for PR page
This commit is contained in:
Tan Nhu 2022-12-05 10:44:47 -08:00 committed by GitHub
parent 225199b008
commit d898f4edb7
12 changed files with 148 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/package.json
View File

@ -43,7 +43,7 @@
"@harness/monaco-yaml": ">=1.0.0",
"@harness/ng-tooltip": ">=1.31.25",
"@harness/telemetry": ">=1.0.42",
"@harness/uicore": "3.84.0",
"@harness/uicore": "3.95.1",
"@harness/use-modal": "1.3.0",
"@popperjs/core": "^2.4.2",
"@projectstorm/react-diagrams-core": "^6.6.0",

25
web/src/pages/PullRequest/PullRequest.module.scss
View File

@ -7,7 +7,7 @@
}
.tabsContainer {
padding-top: var(--spacing-medium);
padding-top: var(--spacing-xsmall);
[role='tablist'] {
background-color: var(--white) !important;
@ -19,6 +19,29 @@
[role='tabpanel'] {
margin-top: 0;
}
[aria-selected='true'] {
.tabTitle {
color: var(--grey-900);
font-weight: 600;
}
}
.tabTitle {
font-weight: 500;
color: var(--grey-700);
.count {
margin-left: var(--spacing-small);
display: inline-block;
border-radius: 8px;
font-weight: 500;
font-size: 12px;
color: var(--primary-7) !important;
background-color: var(--primary-1) !important;
padding: 3px 6px !important;
}
}
}
}

2
web/src/pages/PullRequest/PullRequest.module.scss.d.ts vendored
View File

@ -3,6 +3,8 @@
declare const styles: {
readonly main: string
readonly tabsContainer: string
readonly tabTitle: string
readonly count: string
readonly prNumber: string
}
export default styles

77
web/src/pages/PullRequest/PullRequest.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'
import { Container, PageBody, Text, FontVariation, Tabs } from '@harness/uicore'
import { Container, PageBody, Text, FontVariation, Tabs, IconName } from '@harness/uicore'
import { useGet } from 'restful-react'
import { useAppContext } from 'AppContext'
import { useGetRepositoryMetadata } from 'hooks/useGetRepositoryMetadata'
@ -7,7 +7,11 @@ import { useStrings } from 'framework/strings'
import { RepositoryPageHeader } from 'components/RepositoryPageHeader/RepositoryPageHeader'
import { getErrorMessage } from 'utils/Utils'
import type { PullRequestResponse } from 'utils/types'
import { CodeIcon } from 'utils/GitUtils'
import { PullRequestMetadataInfo } from './PullRequestMetadataInfo'
import { PullRequestConversation } from './PullRequestConversation/PullRequestConversation'
import { PullRequestDiff } from './PullRequestDiff/PullRequestDiff'
import { PullRequestCommits } from './PullRequestCommits/PullRequestCommits'
import css from './PullRequest.module.scss'
export default function PullRequest() {
@ -39,35 +43,37 @@ export default function PullRequest() {
}
/>
<PageBody loading={loading || prLoading} error={getErrorMessage(error || prError)} retryOnError={() => refetch()}>
{!!repoMetadata && !!prData && <PullRequestMetadataInfo repoMetadata={repoMetadata} {...prData} />}
{!!prData && (
<Container className={css.tabsContainer}>
<Tabs
id="pullRequestTabs"
defaultSelectedTabId={'conversation'}
large={false}
tabList={[
{
id: 'conversation',
title: getString('conversation'),
panel: <div>conversation</div>
},
{
id: 'commits',
title: getString('commits'),
panel: <div>Commit</div>
},
{
id: 'diff',
title: getString('diff'),
panel: <div>Diff</div>
}
]}
/>
</Container>
)}
{/* <pre>{JSON.stringify(prData || {}, null, 2)}</pre> */}
{repoMetadata ? (
prData ? (
<>
<PullRequestMetadataInfo repoMetadata={repoMetadata} {...prData} />
<Container className={css.tabsContainer}>
<Tabs
id="pullRequestTabs"
defaultSelectedTabId={'conversation'}
large={false}
tabList={[
{
id: 'conversation',
title: <TabTitle icon={CodeIcon.Chat} title={getString('conversation')} count={100} />,
panel: <PullRequestConversation repoMetadata={repoMetadata} pullRequestMetadata={prData} />
},
{
id: 'commits',
title: <TabTitle icon={CodeIcon.Commit} title={getString('commits')} count={15} />,
panel: <PullRequestCommits repoMetadata={repoMetadata} pullRequestMetadata={prData} />
},
{
id: 'diff',
title: <TabTitle icon={CodeIcon.Commit} title={getString('diff')} count={20} />,
panel: <PullRequestDiff repoMetadata={repoMetadata} pullRequestMetadata={prData} />
}
]}
/>
</Container>
</>
) : null
) : null}
</PageBody>
</Container>
)
@ -78,3 +84,14 @@ const PullRequestTitle: React.FC<PullRequestResponse> = ({ title, number }) => (
{title} <span className={css.prNumber}>#{number}</span>
</Text>
)
const TabTitle: React.FC<{ icon: IconName; title: string; count?: number }> = ({ icon, title, count }) => (
<Text icon={icon} className={css.tabTitle}>
{title}{' '}
{!!count && (
<Text inline className={css.count}>
{count}
</Text>
)}
</Text>
)

2
web/src/pages/PullRequest/PullRequestCommits/PullRequestCommits.module.scss Normal file
View File

@ -0,0 +1,2 @@
.main {
}

20
web/src/pages/PullRequest/PullRequestCommits/PullRequestCommits.tsx Normal file
View File

@ -0,0 +1,20 @@
import React from 'react'
import { Container } from '@harness/uicore'
import { useAppContext } from 'AppContext'
import { useStrings } from 'framework/strings'
import type { GitInfoProps } from 'utils/GitUtils'
import css from './PullRequestCommits.module.scss'
export const PullRequestCommits: React.FC<Pick<GitInfoProps, 'repoMetadata' | 'pullRequestMetadata'>> = ({
repoMetadata,
pullRequestMetadata
}) => {
const { getString } = useStrings()
const { routes } = useAppContext()
return (
<Container className={css.main} padding="xlarge">
COMMITS...
</Container>
)
}

2
web/src/pages/PullRequest/PullRequestConversation/PullRequestConversation.module.scss Normal file
View File

@ -0,0 +1,2 @@
.main {
}

20
web/src/pages/PullRequest/PullRequestConversation/PullRequestConversation.tsx Normal file
View File

@ -0,0 +1,20 @@
import React from 'react'
import { Container } from '@harness/uicore'
import { useAppContext } from 'AppContext'
import { useStrings } from 'framework/strings'
import type { GitInfoProps } from 'utils/GitUtils'
import css from './PullRequestConversation.module.scss'
export const PullRequestConversation: React.FC<Pick<GitInfoProps, 'repoMetadata' | 'pullRequestMetadata'>> = ({
repoMetadata,
pullRequestMetadata
}) => {
const { getString } = useStrings()
const { routes } = useAppContext()
return (
<Container className={css.main} padding="xlarge">
CONVERSATION...
</Container>
)
}

2
web/src/pages/PullRequest/PullRequestDiff/PullRequestDiff.module.scss Normal file
View File

@ -0,0 +1,2 @@
.main {
}

20
web/src/pages/PullRequest/PullRequestDiff/PullRequestDiff.tsx Normal file
View File

@ -0,0 +1,20 @@
import React from 'react'
import { Container } from '@harness/uicore'
import { useAppContext } from 'AppContext'
import { useStrings } from 'framework/strings'
import type { GitInfoProps } from 'utils/GitUtils'
import css from './PullRequestDiff.module.scss'
export const PullRequestDiff: React.FC<Pick<GitInfoProps, 'repoMetadata' | 'pullRequestMetadata'>> = ({
repoMetadata,
pullRequestMetadata
}) => {
const { getString } = useStrings()
const { routes } = useAppContext()
return (
<Container className={css.main} padding="xlarge">
DIFF
</Container>
)
}

5
web/src/utils/GitUtils.ts
View File

@ -10,6 +10,7 @@ import type {
RepoCommit,
TypesRepository
} from 'services/code'
import type { PullRequestResponse } from './types'
export interface GitInfoProps {
repoMetadata: TypesRepository
@ -18,6 +19,7 @@ export interface GitInfoProps {
resourceContent: OpenapiGetContentOutput
commitRef: string
commits: RepoCommit[]
pullRequestMetadata: PullRequestResponse
}
export enum GitContentType {
@ -70,7 +72,8 @@ export const CodeIcon = {
Settings: 'code-settings' as IconName,
Webhook: 'code-webhook' as IconName,
InputSpinner: 'steps-spinner' as IconName,
InputSearch: 'search' as IconName
InputSearch: 'search' as IconName,
Chat: 'chat' as IconName
}
export const REFS_TAGS_PREFIX = 'refs/tags/'

8
web/yarn.lock
View File

@ -1967,10 +1967,10 @@
resolved "https://npm.pkg.github.com/download/@harness/telemetry/1.0.44/55e75d8caccbcdcb0a11226c813edd631578d9af#55e75d8caccbcdcb0a11226c813edd631578d9af"
integrity sha512-t6N3Ie/F9Nw/tANAmptsunebGYBkC3j865bc75MZVL2ZqFM0CBRxFR1MG8zC+hU6uDpr8Drqsn81NmdlVlBSmA==
"@harness/uicore@3.84.0":
version "3.84.0"
resolved "https://npm.pkg.github.com/download/@harness/uicore/3.84.0/9c02acd3106254a08530f68065317d031cd15e67#9c02acd3106254a08530f68065317d031cd15e67"
integrity sha512-3AvETaoDHGGKSbnFN9rZAg0HgWWBKMeqGpbonxWj/6gUEahlMnzd8QGvpjUdbYOVCAtPbUVxrtI0Yf4VQPuf5g==
"@harness/uicore@3.95.1":
version "3.95.1"
resolved "https://npm.pkg.github.com/download/@harness/uicore/3.95.1/4b9551e0299ed56e6f4291e7e75cb48562aa7dd8#4b9551e0299ed56e6f4291e7e75cb48562aa7dd8"
integrity sha512-NSxVyQ5aGLF+3kysijjEeqFPQ4HHlWdYRq9HRKj8lRoT0YLYyvxSxZbGae/Ceq74SutnDk6h36qEK2L6lu8Cfw==
"@harness/use-modal@1.3.0":
version "1.3.0"