feat: [scm-73]: Update repo empty state with new design (#254)

web/src/framework/strings/stringTypes.ts

@@ -7,6 +7,7 @@ export interface StringsMap {
   addComment: string
   addGitIgnore: string
   addLicense: string
+  addNewFile: string
   addReadMe: string
   all: string
   allBranches: string
@@ -83,6 +84,8 @@ export interface StringsMap {
   editNotAllowed: string
   edited: string
   email: string
+  emptyRepoHeader: string
+  emptyRepoInclude: string
   enableSSLVerification: string
   enabled: string
   enterDescription: string
@@ -188,7 +191,11 @@ export interface StringsMap {
   rejected: string
   renameFile: string
   replyHere: string
+  repoCloneHeader: string
+  repoCloneLabel: string
   repoEmptyMarkdown: string
+  repoEmptyMarkdownClone: string
+  repoEmptyMarkdownExisting: string
   'repos.activities': string
   'repos.data': string
   'repos.enterBranchName': string

web/src/i18n/strings.en.yaml

@@ -245,27 +245,26 @@ repoEmptyMarkdown: |
   ### Get started by
 
   Creating [a new file](NEW_FILE_URL).
-
+repoEmptyMarkdownClone: |
   ### Or you can clone this repository
 
+  Clone with HTTPS
   ```sh
   git clone REPO_URL
   ```
-
   Then push some content into it.
 
   ```sh
   cd REPO_NAME
-  echo "# Hello World" >> README.md
   git add README.md
-  git commit -m"Initial commit"
+  git commit -m "Initial commit"
   git push -u origin main
   ```
-
+repoEmptyMarkdownExisting: |
   ### Or you can push an existing repository
 
   ```sh
-  git remote add origin REPO_URL
+  git remote add REPO_URL
   git branch -M main
   git push -u origin main
   ```
@@ -281,3 +280,8 @@ noChanges: There is no changes
 noChangesPR: This Pull Request does not have any changes.
 noChangesCompare: Source and target are identical.
 pageLoading: Loading, please wait...
+repoCloneHeader: Or you can clone this repository
+repoCloneLabel: Clone with HTTPS
+emptyRepoHeader: This repository is empty. Let's get started...
+addNewFile: + New File
+emptyRepoInclude: We recommend every repository include a [README](README_URL), [LICENSE](LICENSE_URL), and [.gitignore](GITIGNORE_URL).

web/src/pages/Repository/Repository.module.scss

@@ -6,3 +6,9 @@
 .emptyRepo {
   padding: var(--spacing-xxlarge) !important;
 }
+
+.divContainer {
+  background: var(--white);
+  box-shadow: 0px 0px 1px rgba(40, 41, 61, 0.08), 0px 0.5px 2px rgba(96, 97, 112, 0.16);
+  border-radius: 4px;
+}

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

@@ -3,5 +3,6 @@
 declare const styles: {
   readonly main: string
   readonly emptyRepo: string
+  readonly divContainer: string
 }
 export default styles

web/src/pages/Repository/Repository.tsx

@@ -1,16 +1,18 @@
 import React from 'react'
-import { Container, PageBody } from '@harness/uicore'
+import { Button, ButtonVariation, Container, FontVariation, Layout, PageBody, Text } from '@harness/uicore'
 import { useGetResourceContent } from 'hooks/useGetResourceContent'
 import { voidFn, getErrorMessage } from 'utils/Utils'
 import { useAppContext } from 'AppContext'
 import { useGetRepositoryMetadata } from 'hooks/useGetRepositoryMetadata'
 import { LoadingSpinner } from 'components/LoadingSpinner/LoadingSpinner'
 import { useStrings } from 'framework/strings'
+import type { OpenapiGetContentOutput } from 'services/code'
 import { MarkdownViewer } from 'components/SourceCodeViewer/SourceCodeViewer'
 import type { GitInfoProps } from 'utils/GitUtils'
 import { useDisableCodeMainLinks } from 'hooks/useDisableCodeMainLinks'
 import { RepositoryContent } from './RepositoryContent/RepositoryContent'
 import { RepositoryHeader } from './RepositoryHeader/RepositoryHeader'
+import { ContentHeader } from './RepositoryContent/ContentHeader/ContentHeader'
 import css from './Repository.module.scss'
 
 export default function Repository() {
@@ -40,7 +42,12 @@ export default function Repository() {
               />
             )}
 
-            {isRepositoryEmpty && <EmptyRepositoryInfo repoMetadata={repoMetadata} />}
+            {isRepositoryEmpty && (
+              <EmptyRepositoryInfo
+                repoMetadata={repoMetadata}
+                resourceContent={resourceContent as OpenapiGetContentOutput}
+              />
+            )}
           </>
         )}
       </PageBody>
@@ -48,7 +55,10 @@ export default function Repository() {
   )
 }
 
-const EmptyRepositoryInfo: React.FC<Pick<GitInfoProps, 'repoMetadata'>> = ({ repoMetadata }) => {
+const EmptyRepositoryInfo: React.FC<Pick<GitInfoProps, 'repoMetadata' | 'resourceContent'>> = (
+  { repoMetadata },
+  resourceContent
+) => {
   const { routes } = useAppContext()
   const { getString } = useStrings()
   const { currentUserProfileURL } = useAppContext()
@@ -59,16 +69,53 @@ const EmptyRepositoryInfo: React.FC<Pick<GitInfoProps, 'repoMetadata'>> = ({ rep
   })
 
   useDisableCodeMainLinks(true)
-
   return (
     <Container className={css.emptyRepo}>
-      <MarkdownViewer
-        source={getString('repoEmptyMarkdown')
-          .replace(/NEW_FILE_URL/g, newFileURL)
-          .replace(/REPO_URL/g, repoMetadata.git_url || '')
-          .replace(/REPO_NAME/g, repoMetadata.uid || '')
-          .replace(/CREATE_API_TOKEN_URL/g, currentUserProfileURL || '')}
+      <ContentHeader
+        repoMetadata={repoMetadata}
+        gitRef={repoMetadata.default_branch as string}
+        resourcePath={''}
+        resourceContent={resourceContent}
       />
+      <Container
+        margin={{ bottom: 'xxlarge' }}
+        padding={{ top: 'xxlarge', bottom: 'xxlarge', left: 'medium', right: 'medium' }}
+        className={css.divContainer}>
+        <Text font={{ variation: FontVariation.H5 }}>{getString('emptyRepoHeader')}</Text>
+        <Layout.Horizontal padding={{ top: 'large' }}>
+          <Button variation={ButtonVariation.PRIMARY} text={getString('addNewFile')} href={newFileURL}></Button>
+
+          <Container padding={{ left: 'medium', top: 'xsmall' }}>
+            <MarkdownViewer
+              source={getString('emptyRepoInclude')
+                .replace(/README_URL/g, newFileURL + `?name=README.md` || '')
+                .replace(/LICENSE_URL/g, newFileURL + `?name=LICENSE.md` || '')
+                .replace(/GITIGNORE_URL/g, newFileURL + `?name=.gitignore` || '')}
+            />
+          </Container>
+        </Layout.Horizontal>
+      </Container>
+      <Container
+        margin={{ bottom: 'xxlarge' }}
+        padding={{ top: 'xxlarge', bottom: 'xxlarge', left: 'medium', right: 'medium' }}
+        className={css.divContainer}>
+        <MarkdownViewer
+          source={getString('repoEmptyMarkdownClone')
+            .replace(/REPO_URL/g, repoMetadata.git_url || '')
+            .replace(/REPO_NAME/g, repoMetadata.uid || '')}
+        />
+      </Container>
+      <Container
+        margin={{ bottom: 'xxlarge' }}
+        padding={{ top: 'xxlarge', bottom: 'xxlarge', left: 'medium', right: 'medium' }}
+        className={css.divContainer}>
+        <MarkdownViewer
+          source={getString('repoEmptyMarkdownExisting')
+            .replace(/REPO_URL/g, '...')
+            .replace(/REPO_NAME/g, repoMetadata.uid || '')
+            .replace(/CREATE_API_TOKEN_URL/g, currentUserProfileURL || '')}
+        />
+      </Container>
     </Container>
   )
 }

web/src/pages/RepositoryFileEdit/FileEditor/FileEditor.tsx

@@ -100,6 +100,16 @@ function Editor({ resourceContent, repoMetadata, gitRef, resourcePath, isReposit
     }
   }, [startVerifyFolder, folderContent, fileResourcePath])
 
+  useEffect(() => {
+    if (isNew) {
+      // setName from click on empty repo page so either readme, license or gitignore
+      const nameExists = window.location.href.includes('?name=')
+      if (nameExists) {
+        const fileName = window.location.href.split('?name=')[1]
+        setFileName(fileName)
+      }
+    }
+  }, [isNew])
   return (
     <Container className={css.container}>
       <Layout.Horizontal className={css.heading}>