Merge branch 'main' into account-settings

apps/design-system/package.json

@@ -17,14 +17,14 @@
     "@harnessio/yaml-editor": "workspace:*",
     "clsx": "^2.1.1",
     "monaco-editor": "0.50.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-live": "^4.1.8",
     "react-router-dom": "^6.26.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.3",
     "@vitejs/plugin-react-swc": "^3.7.2",
     "eslint": "^8.57.1",
     "eslint-plugin-react-hooks": "^4.6.2",

apps/design-system/src/components/docs-page/example-layout.tsx

@@ -2,6 +2,8 @@ import { FC, PropsWithChildren } from 'react'
 
 import css from './example-layout.module.css'
 
-const ExampleLayout: FC<PropsWithChildren> = ({ children }) => <div className={css.layout}>{children}</div>
+const ExampleLayout: FC<PropsWithChildren<React.HTMLAttributes<HTMLElement>>> = ({ children }) => (
+  <div className={css.layout}>{children}</div>
+)
 
 export default ExampleLayout

apps/design-system/src/components/docs-page/root.tsx

@@ -2,7 +2,7 @@ import { FC, PropsWithChildren } from 'react'
 
 import css from './root.module.css'
 
-const Root: FC<PropsWithChildren> = ({ children }) => (
+const Root: FC<PropsWithChildren<React.HTMLAttributes<HTMLElement>>> = ({ children }) => (
   <article className={css.root}>
     <div className={css.content}>{children}</div>
   </article>

apps/design-system/src/components/docs-page/section.tsx

@@ -4,7 +4,7 @@ import { Text } from '@harnessio/ui/components'
 
 import css from './section.module.css'
 
-export interface SectionProps extends PropsWithChildren {
+export interface SectionProps extends PropsWithChildren<React.HTMLAttributes<HTMLElement>> {
   title: string
   description?: ReactNode
 }

apps/design-system/src/components/docs-page/sub-section.tsx

@@ -4,7 +4,7 @@ import { Text } from '@harnessio/ui/components'
 
 import css from './section.module.css'
 
-export interface SubSectionProps extends PropsWithChildren {
+export interface SubSectionProps extends PropsWithChildren<React.HTMLAttributes<HTMLElement>> {
   title: string
   description?: ReactNode
 }

apps/design-system/src/components/docs-page/summary.tsx

@@ -2,7 +2,7 @@ import { FC, PropsWithChildren } from 'react'
 
 import { Text } from '@harnessio/ui/components'
 
-export interface SummaryProps extends PropsWithChildren {
+export interface SummaryProps extends PropsWithChildren<React.HTMLAttributes<HTMLElement>> {
   title: string
 }
 

apps/design-system/src/main.tsx

@@ -1,10 +1,11 @@
 import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
+import { render } from 'react-dom'
 
 import App from './App'
 
-createRoot(document.getElementById('root')!).render(
+render(
   <StrictMode>
     <App />
-  </StrictMode>
+  </StrictMode>,
+  document.getElementById('root')
 )

apps/design-system/src/pages/view-preview/commit-details-view-wrapper.tsx

@@ -3,7 +3,7 @@ import { Route, Routes } from 'react-router-dom'
 
 import { CommitDetailsView } from '@subjects/views/commit-details'
 
-const CommitDetailsViewWrapper: FC<PropsWithChildren<unknown>> = ({ children }) => (
+const CommitDetailsViewWrapper: FC<PropsWithChildren<React.HTMLAttributes<HTMLElement>>> = ({ children }) => (
   <Routes>
     <Route path="*" element={<CommitDetailsView />}>
       <Route path="*" element={children} />

apps/design-system/src/pages/view-preview/project-settings-wrapper.tsx

@@ -13,7 +13,7 @@ const Layout = () => {
   )
 }
 
-export const ProjectSettingsWrapper: FC<PropsWithChildren<unknown>> = ({ children }) => {
+export const ProjectSettingsWrapper: FC<PropsWithChildren<React.HTMLAttributes<HTMLElement>>> = ({ children }) => {
   return (
     <>
       <RootViewWrapper asChild>

apps/design-system/src/pages/view-preview/pull-request-layout-wrapper.tsx

@@ -8,7 +8,7 @@ import { PullRequestLayout } from '@harnessio/ui/views'
 
 import RootViewWrapper from './root-view-wrapper'
 
-const PullRequestLayoutWrapper: FC<PropsWithChildren<unknown>> = ({ children }) => {
+const PullRequestLayoutWrapper: FC<PropsWithChildren<React.HTMLAttributes<HTMLElement>>> = ({ children }) => {
   const usePullRequestStore = useCallback(
     () => ({
       ...pullRequestStore

apps/design-system/src/pages/view-preview/repo-files-view-wrapper.tsx

@@ -7,7 +7,7 @@ import { noop, useTranslationsStore } from '@utils/viewUtils'
 import { FileExplorer } from '@harnessio/ui/components'
 import { BranchSelectorTab, IBranchSelectorStore, RepoSidebar as RepoSidebarView } from '@harnessio/ui/views'
 
-export const RepoFilesViewWrapper: FC<PropsWithChildren> = ({ children }) => {
+export const RepoFilesViewWrapper: FC<PropsWithChildren<React.HTMLAttributes<HTMLElement>>> = ({ children }) => {
   const useRepoBranchesStore = useCallback(
     (): IBranchSelectorStore => ({
       ...repoFilesStore.branchSelectorStore,

apps/design-system/src/pages/view-preview/repo-settings-view-wrapper.tsx

@@ -5,7 +5,7 @@ import { useTranslationsStore } from '@utils/viewUtils'
 
 import { RepoSettingsLayout } from '@harnessio/ui/views'
 
-export const RepoSettingsViewWrapper: FC<PropsWithChildren> = ({ children }) => {
+export const RepoSettingsViewWrapper: FC<PropsWithChildren<React.HTMLAttributes<HTMLElement>>> = ({ children }) => {
   return (
     <Routes>
       <Route path="*" element={<RepoSettingsLayout useTranslationStore={useTranslationsStore} />}>

apps/design-system/src/pages/view-preview/repo-view-wrapper.tsx

@@ -3,15 +3,23 @@ import { Route } from 'react-router-dom'
 
 import { useTranslationsStore } from '@utils/viewUtils'
 
-import { RepoLayout } from '@harnessio/ui/views'
+import { RepoSubheader } from '@harnessio/ui/components'
 
 import RootViewWrapper from './root-view-wrapper'
 
-const RepoViewWrapper: FC<PropsWithChildren<unknown>> = ({ children }) => (
+const RepoViewWrapper: FC<PropsWithChildren<React.HTMLAttributes<HTMLElement>>> = ({ children }) => (
   <RootViewWrapper asChild>
-    <Route path="*" element={<RepoLayout useTranslationStore={useTranslationsStore} />}>
-      <Route path="*" element={children} />
-    </Route>
+    <Route
+      path="*"
+      element={
+        <>
+          <div className="layer-high sticky top-[55px] bg-background-1">
+            <RepoSubheader useTranslationStore={useTranslationsStore} />
+          </div>
+          {children}
+        </>
+      }
+    />
   </RootViewWrapper>
 )
 

apps/design-system/src/pages/view-preview/view-preview.tsx

@@ -13,9 +13,9 @@ import PipelineListWrapper from '@subjects/views/pipeline-list/pipeline-list'
 import { ProfileSettingsView } from '@subjects/views/profile-settings'
 import { ProfileSettingsKeysView } from '@subjects/views/profile-settings-keys'
 import PullRequestCompareWrapper from '@subjects/views/pull-request-compare/pull-request-compare'
-import PullRequestChanges from '@subjects/views/pull-request-conversation/pull-request-changes'
+import PullRequestChangesWrapper from '@subjects/views/pull-request-conversation/pull-request-changes-wrapper'
 import PullRequestCommits from '@subjects/views/pull-request-conversation/pull-request-commits'
-import PullRequestConversation from '@subjects/views/pull-request-conversation/pull-request-conversation'
+import PullRequestConversationWrapper from '@subjects/views/pull-request-conversation/pull-request-conversation-wrapper'
 import PullRequestListWrapper from '@subjects/views/pull-request-list/pull-request-list'
 import { RepoBranchesView } from '@subjects/views/repo-branches'
 import { RepoCommitsView } from '@subjects/views/repo-commits'
@@ -82,7 +82,12 @@ export const viewPreviews: Record<string, ReactNode> = {
   ),
   'pull-request-conversation': (
     <PullRequestLayoutWrapper>
-      <PullRequestConversation />
+      <PullRequestConversationWrapper state={'simple'} />
+    </PullRequestLayoutWrapper>
+  ),
+  'pull-request-conversation-1': (
+    <PullRequestLayoutWrapper>
+      <PullRequestConversationWrapper state={'complex-1'} />
     </PullRequestLayoutWrapper>
   ),
   'pull-request-commits': (
@@ -92,7 +97,12 @@ export const viewPreviews: Record<string, ReactNode> = {
   ),
   'pull-request-changes': (
     <PullRequestLayoutWrapper>
-      <PullRequestChanges />
+      <PullRequestChangesWrapper state={'simple'} />
+    </PullRequestLayoutWrapper>
+  ),
+  'pull-request-changes-1': (
+    <PullRequestLayoutWrapper>
+      <PullRequestChangesWrapper state={'complex-1'} />
     </PullRequestLayoutWrapper>
   ),
   'repo-files-list': (

apps/design-system/src/subjects/views/pull-request-compare/pull-request-compare.tsx

@@ -61,8 +61,10 @@ const PullRequestCompareWrapper: FC<Partial<PullRequestComparePageProps>> = prop
       setSearchCommitQuery={noop}
       useTranslationStore={useTranslationsStore}
       isLoading={false}
-      searchBranchQuery=""
-      setSearchBranchQuery={noop}
+      searchSourceQuery=""
+      setSearchSourceQuery={noop}
+      searchTargetQuery=""
+      setSearchTargetQuery={noop}
       searchReviewersQuery=""
       setSearchReviewersQuery={noop}
       {...props}

apps/design-system/src/subjects/views/pull-request-conversation/pull-request-changes-wrapper.tsx

@@ -0,0 +1,12 @@
+import { FC } from 'react'
+
+import PullRequestChanges from './pull-request-changes'
+
+interface PullRequestChangesWrapperProps {
+  state: string
+}
+const PullRequestChangesWrapper: FC<PullRequestChangesWrapperProps> = ({ state }) => {
+  return <PullRequestChanges state={state} />
+}
+
+export default PullRequestChangesWrapper

apps/design-system/src/subjects/views/pull-request-conversation/pull-request-changes.tsx

@@ -6,15 +6,20 @@ import { CommitSuggestionsDialog } from '@harnessio/ui/components'
 import { PullRequestChangesPage, TypesCommit, TypesPullReqActivity } from '@harnessio/ui/views'
 
 import { commitData, currentUser } from './pull-request-changes-data'
-import { pullRequestProviderStore } from './pull-request-provider-store'
+import { mockDiffs, pullRequestProviderStore } from './pull-request-provider-store'
 import { pullRequestStore } from './pull-request-store'
 
-const PullRequestChanges: FC<PropsWithChildren> = () => {
+interface PullRequestChangesProps extends PropsWithChildren<React.HTMLAttributes<HTMLElement>> {
+  state: string
+}
+
+const PullRequestChanges: FC<PullRequestChangesProps> = ({ state }) => {
   const isCommitDialogOpen = false
 
   const usePullRequestProviderStore = useCallback(
     () => ({
       ...pullRequestProviderStore,
+      diffs: state === 'complex-1' ? mockDiffs : pullRequestProviderStore.diffs,
       setRepoMetadata: noop,
       setPullReqCommits: noop,
       setShowEditDescription: noop,
@@ -37,7 +42,7 @@ const PullRequestChanges: FC<PropsWithChildren> = () => {
       }
     }),
 
-    []
+    [state]
   )
   return (
     <>
@@ -54,7 +59,7 @@ const PullRequestChanges: FC<PropsWithChildren> = () => {
         setDiffMode={noop}
         loadingReviewers={undefined}
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        diffMode={'split' as any}
+        diffMode={3}
         reviewers={undefined}
         refetchReviewers={noop}
         submitReview={noop}
@@ -78,7 +83,7 @@ const PullRequestChanges: FC<PropsWithChildren> = () => {
         setSelectedCommits={noop}
         markViewed={noop}
         unmarkViewed={noop}
-        activities={undefined}
+        activities={pullRequestProviderStore?.pullReqActivities}
         commentId={undefined}
         onCopyClick={noop}
         onCommentSaveAndStatusChange={noop}

apps/design-system/src/subjects/views/pull-request-conversation/pull-request-commits.tsx

@@ -6,7 +6,7 @@ import { PullRequestCommitsView } from '@harnessio/ui/views'
 
 import { repoCommitStore } from '../pull-request-compare/repo-commit-store'
 
-const PullRequestCommits: FC<PropsWithChildren> = () => {
+const PullRequestCommits: FC<PropsWithChildren<React.HTMLAttributes<HTMLElement>>> = () => {
   const useRepoCommitsListStore = useCallback(
     () => ({
       ...repoCommitStore,

apps/design-system/src/subjects/views/pull-request-conversation/pull-request-conversation-wrapper.tsx

@@ -0,0 +1,12 @@
+import { FC } from 'react'
+
+import PullRequestConversation from './pull-request-conversation'
+
+interface PullRequestConversationWrapperProps {
+  state: string
+}
+const PullRequestConversationWrapper: FC<PullRequestConversationWrapperProps> = ({ state }) => {
+  return <PullRequestConversation state={state} />
+}
+
+export default PullRequestConversationWrapper