diff --git a/web/src/pages/PullRequest/PullRequest.tsx b/web/src/pages/PullRequest/PullRequest.tsx index 8ce9bcfac..a4bb0b04b 100644 --- a/web/src/pages/PullRequest/PullRequest.tsx +++ b/web/src/pages/PullRequest/PullRequest.tsx @@ -14,35 +14,35 @@ * limitations under the License. */ -import ChildAppMounter from 'framework/microfrontends/ChildAppMounter' -import React, { lazy, useCallback, useMemo, useRef, useState } from 'react' -import { Container, Layout, PageBody, PageSpinner, Tabs, Text } from '@harnessio/uicore' +import type { STOAppCustomProps } from '@harness/microfrontends' import { FontVariation } from '@harnessio/design-system' -import type { ParentContext, STOAppCustomProps } from '@harness/microfrontends' +import { Container, Layout, PageBody, PageSpinner, Tabs, Text } from '@harnessio/uicore' +import { useAppContext } from 'AppContext' +import { ExecutionState, ExecutionStatus } from 'components/ExecutionStatus/ExecutionStatus' +import { LoadingSpinner } from 'components/LoadingSpinner/LoadingSpinner' +import { RepositoryPageHeader } from 'components/RepositoryPageHeader/RepositoryPageHeader' +import { tabContainerCSS, TabTitleWithCount } from 'components/TabTitleWithCount/TabTitleWithCount' +import ChildAppMounter from 'framework/microfrontends/ChildAppMounter' +import { useStrings } from 'framework/strings' +import { useScrollTop } from 'hooks/useScrollTop' +import { useSetPageContainerWidthVar } from 'hooks/useSetPageContainerWidthVar' +import { compact } from 'lodash-es' +import React, { lazy, useCallback, useMemo, useRef, useState } from 'react' import { Render } from 'react-jsx-match' import { useHistory, useParams } from 'react-router-dom' -import { compact } from 'lodash-es' -import { useAppContext } from 'AppContext' -import { useStrings } from 'framework/strings' -import { RepositoryPageHeader } from 'components/RepositoryPageHeader/RepositoryPageHeader' -import { useFrontendExecutionForRepo } from 'services/sto/stoComponents' +import type { TypesPullReq, TypesRepository } from 'services/code' +import { useFrontendExecutionForRepo, useFrontendExecutionIssueCounts } from 'services/sto/stoComponents' +import { CodeIcon } from 'utils/GitUtils' import type { Identifier } from 'utils/types' import { getErrorMessage, PullRequestSection } from 'utils/Utils' -import { CodeIcon } from 'utils/GitUtils' -import type { TypesPullReq, TypesRepository } from 'services/code' -import { LoadingSpinner } from 'components/LoadingSpinner/LoadingSpinner' -import { TabTitleWithCount, tabContainerCSS } from 'components/TabTitleWithCount/TabTitleWithCount' -import { ExecutionStatus } from 'components/ExecutionStatus/ExecutionStatus' -import { useSetPageContainerWidthVar } from 'hooks/useSetPageContainerWidthVar' -import { useScrollTop } from 'hooks/useScrollTop' -import { PullRequestMetaLine } from './PullRequestMetaLine' -import { Conversation } from './Conversation/Conversation' -import { Checks } from './Checks/Checks' import { Changes } from '../../components/Changes/Changes' +import { Checks } from './Checks/Checks' +import { Conversation } from './Conversation/Conversation' +import css from './PullRequest.module.scss' import { PullRequestCommits } from './PullRequestCommits/PullRequestCommits' +import { PullRequestMetaLine } from './PullRequestMetaLine' import { PullRequestTitle } from './PullRequestTitle' import { useGetPullRequestInfo } from './useGetPullRequestInfo' -import css from './PullRequest.module.scss' // @ts-ignore const RemoteSTOApp = lazy(() => import(`stoV2/App`)) @@ -51,6 +51,7 @@ const RemotePipelineSecurityView = lazy(() => import(`stoV2/PipelineSecurityView export default function PullRequest() { const history = useHistory() + const { accountId, orgIdentifier = '', projectIdentifier = '' } = useParams() const { getString } = useStrings() const { routes, standalone, routingId } = useAppContext() const { parentContextObj } = useAppContext() @@ -72,6 +73,35 @@ export default function PullRequest() { retryOnErrorFunc } = useGetPullRequestInfo() + const gitUrl = repoMetadata?.git_url + const prNumber = pullReqMetadata?.number + const { data } = useFrontendExecutionForRepo( + { + queryParams: { + accountId, + orgId: orgIdentifier, + projectId: projectIdentifier, + gitUrl: gitUrl || '', + prNumber, + }, + }, + { enabled: gitUrl !== undefined && prNumber !== undefined } + ) + + const { data: countData } = useFrontendExecutionIssueCounts( + { + queryParams: { + accountId, + orgId: orgIdentifier, + projectId: projectIdentifier, + executionIds: data?.executionId || '' + }, + }, + { enabled: data?.executionId !== undefined } + ) + const counts = countData && data?.executionId !== undefined && countData[data?.executionId] ? countData[data?.executionId] : undefined + const issueCount = counts ? (counts.newCritical || 0) + (counts.newHigh || 0) + (counts.newMedium || 0) + (counts.newLow || 0) : undefined + const onAddDescriptionClick = useCallback(() => { setShowEditDescription(true) history.replace( @@ -268,36 +298,45 @@ export default function PullRequest() { id: PullRequestSection.SECURITY_ISSUES, title: ( - - - - {pullReqChecksDecision?.count[pullReqChecksDecision?.overallStatus]} - + {(pullReqChecksDecision?.overallStatus === ExecutionState.RUNNING + || pullReqChecksDecision?.overallStatus === ExecutionState.ERROR) + && ( + + )} ) : null } - count={undefined} + count={pullReqChecksDecision?.overallStatus !== ExecutionState.RUNNING ? issueCount : undefined} padding={{ left: 'medium' }} /> ), - panel: + panel: data?.executionId ? ( + + + ChildApp={RemoteSTOApp} + customComponents={{ /*UserLabel, UsefulOrNot*/ }} + customHooks={{ /*useGetSettingValue, useGetPipelineSummary*/ }} + parentContextObj={parentContextObj} + > + + + + ) : ( + + ) } ]} /> @@ -309,38 +348,6 @@ export default function PullRequest() { ) } -const PullRequestSecurityView: React.FC<{ parentContextObj: ParentContext, gitUrl?: string, prNumber?: number }> = ({ parentContextObj, gitUrl, prNumber }) => { - const { accountId, orgIdentifier = '', projectIdentifier = '' } = useParams() - - const { data } = useFrontendExecutionForRepo( - { - queryParams: { - accountId, - orgId: orgIdentifier, - projectId: projectIdentifier, - gitUrl: gitUrl || '', - prNumber, - }, - }, - { enabled: gitUrl !== undefined } - ) - - return data?.executionId ? ( - - - ChildApp={RemoteSTOApp} - customComponents={{ /*UserLabel, UsefulOrNot*/ }} - customHooks={{ /*useGetSettingValue, useGetPipelineSummary*/ }} - parentContextObj={parentContextObj} - > - - - - ) : ( - - ) -} - // TODO: // - Move pullReqChecksDecision to individual component to avoid weird // re-rendering everything in this page during its polling. Use an atom?