feat: Adds the repo empty view (harness#836)

* feat: add repo empty view

* feat: add preview

* fix: minor design fixes

* fix: spacing

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

@@ -18,6 +18,7 @@ import { RepoBranchesView } from '@subjects/views/repo-branches'
 import { RepoCommitsView } from '@subjects/views/repo-commits'
 import { CreateRepoView } from '@subjects/views/repo-create'
 import { RepoCreateRule } from '@subjects/views/repo-create-rule'
+import { RepoEmpty } from '@subjects/views/repo-empty/repo-empty-view'
 import { RepoFilesEditView } from '@subjects/views/repo-files/repo-files-edit-view'
 import { RepoFilesJsonView } from '@subjects/views/repo-files/repo-files-json-view'
 import { RepoFilesList } from '@subjects/views/repo-files/repo-files-list'
@@ -62,6 +63,11 @@ export const viewPreviews: Record<string, ReactNode> = {
       <RepoSummaryViewWrapper />
     </RepoViewWrapper>
   ),
+  'repo-empty': (
+    <RepoViewWrapper>
+      <RepoEmpty />
+    </RepoViewWrapper>
+  ),
   'repo-list': (
     <RootViewWrapper>
       <RepoListWrapper />

apps/design-system/src/subjects/views/repo-empty/repo-empty-view.tsx

@@ -0,0 +1,12 @@
+import { RepoEmptyView } from '@harnessio/ui/views'
+
+export const RepoEmpty = () => {
+  return (
+    <RepoEmptyView
+      httpUrl="https://github.com/mock-repo"
+      repoName="mock-repo"
+      projName="mock-project"
+      sshUrl="[email protected]:mock-repo.git"
+    />
+  )
+}

packages/ui/src/views/repo/index.ts

@@ -13,6 +13,7 @@ export * from '@views/repo/repo-create'
 
 // repo summary
 export * from '@views/repo/repo-summary/repo-summary'
+export * from '@views/repo/repo-summary/repo-empty-view'
 
 // repo types
 export * from '@views/repo/repo.types'

packages/ui/src/views/repo/repo-summary/repo-empty-view.tsx

@@ -0,0 +1,105 @@
+import {
+  Button,
+  ButtonGroup,
+  ControlGroup,
+  CopyButton,
+  Fieldset,
+  FormSeparator,
+  Input,
+  MarkdownViewer,
+  NoData,
+  Spacer,
+  StyledLink,
+  Text
+} from '@/components'
+import { SandboxLayout } from '@/views'
+
+interface RepoEmptyViewProps {
+  repoName: string
+  projName: string
+  httpUrl: string
+  sshUrl: string
+}
+
+export const RepoEmptyView: React.FC<RepoEmptyViewProps> = ({ repoName, projName, httpUrl, sshUrl }) => {
+  const getInitialCommitMarkdown = () => {
+    return `
+\`\`\`shell
+cd ${repoName}
+git branch -M main
+echo '# Hello World' >> README.md                                                     
+git add README.md
+git commit -m 'Initial commit'
+git push -u origin main
+\`\`\`
+`
+  }
+
+  const getExistingRepoMarkdown = () => {
+    return `
+\`\`\`shell
+git remote add origin http://localhost:3000/git/${projName}/${repoName}.git                     
+git branch -M main
+git push -u origin main
+\`\`\`
+`
+  }
+  return (
+    <SandboxLayout.Main>
+      <SandboxLayout.Content className="max-w-[850px] mx-auto">
+        <Text size={5} weight={'medium'}>
+          Repository
+        </Text>
+        <Spacer size={6} />
+        <NoData
+          withBorder
+          iconName="no-repository"
+          title="This repository is empty"
+          description={['We recommend every repository include a', 'README, LICENSE, and .gitignore.']}
+          primaryButton={{ label: 'New file' }}
+          className="py-0 pb-0 min-h-[40vh]"
+        />
+        <Spacer size={6} />
+
+        <Fieldset>
+          <Text size={4} weight="medium">
+            Please Generate Git Cradentials if it’s your first time cloning the repository
+          </Text>
+          <Text size={3}>Git clone URL</Text>
+          <Input label="HTTP" value={httpUrl} readOnly rightElement={<CopyButton name={httpUrl} />} />
+          <Input label="SSH" value={sshUrl} readOnly rightElement={<CopyButton name={sshUrl} />} />
+          <ControlGroup>
+            <ButtonGroup>
+              <Button>Generate Clone Credentials</Button>
+            </ButtonGroup>
+            <p className="mt-2">
+              You can also manage your git credential{' '}
+              <StyledLink to="/" relative="path">
+                here
+              </StyledLink>
+            </p>
+          </ControlGroup>
+
+          <FormSeparator />
+          <Text size={4} weight="medium">
+            Then push some content into it
+          </Text>
+          <MarkdownViewer source={getInitialCommitMarkdown()} />
+          <Text size={4} weight="medium">
+            Or you can push an existing repository
+          </Text>
+          <ControlGroup>
+            <MarkdownViewer source={getExistingRepoMarkdown()} />
+            <p>
+              You might need to{' '}
+              <StyledLink to="/" relative="path">
+                create an API token
+              </StyledLink>{' '}
+              In order to pull from or push into this repository.
+            </p>
+          </ControlGroup>
+        </Fieldset>
+      </SandboxLayout.Content>
+    </SandboxLayout.Main>
+  )
+}

packages/ui/src/views/repo/repo-summary/repo-summary.tsx

@@ -28,6 +28,7 @@ import { formatDate } from '@utils/utils'
 
 import { CloneRepoDialog } from './components/clone-repo-dialog'
 import SummaryPanel from './components/summary-panel'
+import { RepoEmptyView } from './repo-empty-view'
 
 interface RoutingProps {
   toRepoFiles: () => string
@@ -119,12 +120,11 @@ export function RepoSummaryView({
 
   if (!repoEntryPathToFileTypeMap.size) {
     return (
-      <NoData
-        iconName="no-data-folder"
-        title="No files yet"
-        description={['There are no files in this repository yet.', 'Create new or import an existing file.']}
-        primaryButton={{ label: 'Create file' }}
-        secondaryButton={{ label: 'Import file' }}
+      <RepoEmptyView
+        sshUrl={repository?.git_ssh_url ?? 'could not fetch url'}
+        httpUrl={repository?.git_url ?? 'could not fetch url'}
+        repoName={repoId}
+        projName={spaceId}
       />
     )
   }