Add placeholders for PR page (#113)

* Add placeholders for PR page

* Add placeholders for PR page

web/package.json

@@ -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",

web/src/pages/PullRequest/PullRequest.module.scss

@@ -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;
+      }
+    }
   }
 }
 

web/src/pages/PullRequest/PullRequest.module.scss.d.ts

@@ -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

web/src/pages/PullRequest/PullRequest.tsx

@@ -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} />}
+        {repoMetadata ? (
-
+          prData ? (
-        {!!prData && (
+            <>
-          <Container className={css.tabsContainer}>
+              <PullRequestMetadataInfo repoMetadata={repoMetadata} {...prData} />
-            <Tabs
+              <Container className={css.tabsContainer}>
-              id="pullRequestTabs"
+                <Tabs
-              defaultSelectedTabId={'conversation'}
+                  id="pullRequestTabs"
-              large={false}
+                  defaultSelectedTabId={'conversation'}
-              tabList={[
+                  large={false}
-                {
+                  tabList={[
-                  id: 'conversation',
+                    {
-                  title: getString('conversation'),
+                      id: 'conversation',
-                  panel: <div>conversation</div>
+                      title: <TabTitle icon={CodeIcon.Chat} title={getString('conversation')} count={100} />,
-                },
+                      panel: <PullRequestConversation repoMetadata={repoMetadata} pullRequestMetadata={prData} />
-                {
+                    },
-                  id: 'commits',
+                    {
-                  title: getString('commits'),
+                      id: 'commits',
-                  panel: <div>Commit</div>
+                      title: <TabTitle icon={CodeIcon.Commit} title={getString('commits')} count={15} />,
-                },
+                      panel: <PullRequestCommits repoMetadata={repoMetadata} pullRequestMetadata={prData} />
-                {
+                    },
-                  id: 'diff',
+                    {
-                  title: getString('diff'),
+                      id: 'diff',
-                  panel: <div>Diff</div>
+                      title: <TabTitle icon={CodeIcon.Commit} title={getString('diff')} count={20} />,
-                }
+                      panel: <PullRequestDiff repoMetadata={repoMetadata} pullRequestMetadata={prData} />
-              ]}
+                    }
-            />
+                  ]}
-          </Container>
+                />
-        )}
+              </Container>
-        {/* <pre>{JSON.stringify(prData || {}, null, 2)}</pre> */}
+            </>
+          ) : 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>
+)

web/src/pages/PullRequest/PullRequestCommits/PullRequestCommits.module.scss

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

web/src/pages/PullRequest/PullRequestCommits/PullRequestCommits.tsx

@@ -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>
+  )
+}

web/src/pages/PullRequest/PullRequestConversation/PullRequestConversation.module.scss

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

web/src/pages/PullRequest/PullRequestConversation/PullRequestConversation.tsx

@@ -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>
+  )
+}

web/src/pages/PullRequest/PullRequestDiff/PullRequestDiff.module.scss

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

web/src/pages/PullRequest/PullRequestDiff/PullRequestDiff.tsx

@@ -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>
+  )
+}

web/src/utils/GitUtils.ts

@@ -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/'

web/yarn.lock

@@ -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":
+"@harness/uicore@3.95.1":
-  version "3.84.0"
+  version "3.95.1"
-  resolved "https://npm.pkg.github.com/download/@harness/uicore/3.84.0/9c02acd3106254a08530f68065317d031cd15e67#9c02acd3106254a08530f68065317d031cd15e67"
+  resolved "https://npm.pkg.github.com/download/@harness/uicore/3.95.1/4b9551e0299ed56e6f4291e7e75cb48562aa7dd8#4b9551e0299ed56e6f4291e7e75cb48562aa7dd8"
-  integrity sha512-3AvETaoDHGGKSbnFN9rZAg0HgWWBKMeqGpbonxWj/6gUEahlMnzd8QGvpjUdbYOVCAtPbUVxrtI0Yf4VQPuf5g==
+  integrity sha512-NSxVyQ5aGLF+3kysijjEeqFPQ4HHlWdYRq9HRKj8lRoT0YLYyvxSxZbGae/Ceq74SutnDk6h36qEK2L6lu8Cfw==
 
 "@harness/use-modal@1.3.0":
   version "1.3.0"