added settings empty flow (#90)

web/src/RouteDefinitions.ts

@@ -42,6 +42,7 @@ export interface SCMRoutes {
   }) => string
   toSCMRepositoryCommits: ({ repoPath, commitRef }: { repoPath: string; commitRef: string }) => string
   toSCMRepositoryBranches: ({ repoPath, branch }: { repoPath: string; branch?: string }) => string
+  toSCMRepositorySettings: ({ repoPath }: { repoPath: string }) => string
 }
 
 export const routes: SCMRoutes = {
@@ -52,5 +53,6 @@ export const routes: SCMRoutes = {
     `/${repoPath}/${gitRef ? '/' + gitRef : ''}${resourcePath ? '/~/' + resourcePath : ''}`,
   toSCMRepositoryFileEdit: ({ repoPath, gitRef, resourcePath }) => `/${repoPath}/edit/${gitRef}/~/${resourcePath}`,
   toSCMRepositoryCommits: ({ repoPath, commitRef }) => `/${repoPath}/commits/${commitRef}`,
-  toSCMRepositoryBranches: ({ repoPath, branch }) => `/${repoPath}/branches/${branch ? '/' + branch : ''}`
+  toSCMRepositoryBranches: ({ repoPath, branch }) => `/${repoPath}/branches/${branch ? '/' + branch : ''}`,
+  toSCMRepositorySettings: ({ repoPath }) => `/${repoPath}/settings`
 }

web/src/framework/strings/stringTypes.ts

@@ -78,6 +78,7 @@ export interface StringsMap {
   newRepo: string
   next: string
   noAccount: string
+  noWebHooks: string
   none: string
   ok: string
   onDate: string

web/src/i18n/strings.en.yaml

@@ -112,3 +112,4 @@ branchUpToDate: Up to date with {{defaultBranch}}
 branchDivergenceBehind: '{{behind}} commit(s) behind {{defaultBranch}}'
 branchDivergenceAhead: '{{ahead}} commit(s) ahead {{defaultBranch}}'
 branchDivergenceAheadBehind: '{{ahead}} commit(s) ahead, {{behind}} commit(s) behind {{defaultBranch}}'
+noWebHooks: 'Here is no Webhook. Try to'

web/src/pages/RepositorySettings/RepositorySettings.tsx

@@ -1,15 +1,36 @@
 import React from 'react'
-import { Container, PageBody } from '@harness/uicore'
+import { PageBody, Button, Intent, Container, PageHeader } from '@harness/uicore'
 import { useGetRepositoryMetadata } from 'hooks/useGetRepositoryMetadata'
+import { useStrings } from 'framework/strings'
+
+import { RepositorySettingsHeader } from './RepositorySettingsHeader/RepositorySettingsHeader'
+
+import emptyStateImage from './empty-state.svg'
 import css from './RepositorySettings.module.scss'
 
-export default function RepositoryBranches() {
+export default function RepositorySettings() {
   const { repoMetadata, error, loading } = useGetRepositoryMetadata()
-
+  const NewWebHookButton = <Button type="submit" text={'Create Webhook'} intent={Intent.PRIMARY} />
+  const { getString } = useStrings()
   return (
     <Container className={css.main}>
-      <PageBody loading={loading} error={error}>
+      <PageHeader
-        {repoMetadata ? <>{/* To be implemented... */}</> : null}
+        title=""
+        breadcrumbs={repoMetadata ? <RepositorySettingsHeader repoMetadata={repoMetadata} /> : null}></PageHeader>
+      <PageBody
+        loading={loading}
+        error={error}
+        noData={{
+          when: () => repoMetadata !== null,
+          message: getString('noWebHooks'),
+          image: emptyStateImage,
+          button: NewWebHookButton
+        }}>
+        {repoMetadata ? (
+          <>
+            <RepositorySettingsHeader repoMetadata={repoMetadata} />
+          </>
+        ) : null}
       </PageBody>
     </Container>
   )

web/src/pages/RepositorySettings/RepositorySettingsHeader/RepositorySettingsHeader.module.scss

@@ -0,0 +1,7 @@
+.header {
+  padding: var(--spacing-medium) var(--spacing-xlarge) 0 var(--spacing-xlarge) !important;
+}
+
+.breadcrumb {
+  align-items: center;
+}

web/src/pages/RepositorySettings/RepositorySettingsHeader/RepositorySettingsHeader.module.scss.d.ts

@@ -0,0 +1,7 @@
+/* eslint-disable */
+// this is an auto-generated file
+declare const styles: {
+  readonly header: string
+  readonly breadcrumb: string
+}
+export default styles

web/src/pages/RepositorySettings/RepositorySettingsHeader/RepositorySettingsHeader.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Container, Layout, Icon, Color, Text, FontVariation } from '@harness/uicore'
+import { Link } from 'react-router-dom'
+import { useStrings } from 'framework/strings'
+import { useAppContext } from 'AppContext'
+import { useGetSpaceParam } from 'hooks/useGetSpaceParam'
+
+import type { GitInfoProps } from 'utils/GitUtils'
+import css from './RepositorySettingsHeader.module.scss'
+
+export function RepositorySettingsHeader({ repoMetadata }: Pick<GitInfoProps, 'repoMetadata'>) {
+  const { getString } = useStrings()
+  const { routes } = useAppContext()
+  const space = useGetSpaceParam()
+  return (
+    <Container className={css.header}>
+      <Container>
+        <Layout.Horizontal spacing="small" className={css.breadcrumb}>
+          <Link to={routes.toSCMRepositoriesListing({ space })}>{getString('repositories')}</Link>
+          <Icon name="main-chevron-right" size={10} color={Color.GREY_500} />
+          <Link to={routes.toSCMRepository({ repoPath: repoMetadata.path as string })}>{repoMetadata.uid}</Link>
+        </Layout.Horizontal>
+        <Container padding={{ top: 'medium', bottom: 'medium' }}>
+          <Text font={{ variation: FontVariation.H4 }}>{getString('settings')}</Text>
+        </Container>
+      </Container>
+    </Container>
+  )
+}

web/src/pages/RepositorySettings/RepossitorySettingsContent/RepositorySettingsContent.tsx

@@ -0,0 +1,9 @@
+// import React from 'react'
+// import type { GitInfoProps } from 'utils/GitUtils'
+
+// export function RepositorySettingsContent({ repoMetadata }: Pick<GitInfoProps, 'repoMetadata'>) {
+//   if (repoMetadata) {
+//     return <NoWebHooks />
+//   }
+//   return null
+// }