Initial skeleton for Repository Resource View flow (#30)

* API integration for Repos listing page

* Add custom branch when creating a repo

* Skeleton for Repository Resource View flow

web/.gitignore

@@ -2,4 +2,5 @@ node_modules
 dist
 coverage
 .env
-yarn-error*
+yarn-error*
+.DS_Store

web/config/moduleFederation.config.js

@@ -35,7 +35,6 @@ module.exports = {
  './App': './src/App.tsx',
  './Welcome': './src/views/Welcome/Welcome.tsx',
  './Repos': './src/views/Repos/Repos.tsx',
- './NewRepo': './src/views/NewRepo/NewRepo.tsx',
  './RepoFiles': './src/views/RepoFiles/RepoFiles.tsx',
  './RepoFileDetails': './src/views/RepoFileDetails/RepoFileDetails.tsx',
  './RepoCommits': './src/views/RepoCommits/RepoCommits.tsx',

web/config/webpack.dev.js

@@ -34,10 +34,10 @@ const devConfig = {
  hot: true,
  host: 'localhost',
  historyApiFallback: true,
- port: 3000,
+ port: 3001,
  proxy: {
  '/api': {
- target: targetLocalHost ? 'http:https://localhost:3001' : baseUrl,
+ target: targetLocalHost ? 'http:https://localhost:3000' : baseUrl,
  logLevel: 'debug',
  secure: false,
  changeOrigin: true

web/package.json

@@ -88,7 +88,6 @@
  "react-popper": "^2.2.3",
  "react-qr-code": "^1.1.1",
  "react-router-dom": "^5.2.0",
- "react-shadow": "^19.0.3",
  "react-split-pane": "^0.1.92",
  "react-table": "^7.1.0",
  "react-table-sticky": "^1.1.3",

web/src/App.tsx

@@ -29,9 +29,10 @@ const App: React.FC<AppProps> = React.memo(function App({
 }: AppProps) {
  const [strings, setStrings] = useState<LanguageRecord>()
  const [token, setToken] = useAPIToken(apiToken)
- const getRequestOptions = useCallback((): Partial<RequestInit> => {
- return buildResfulReactRequestOptions(hooks.useGetToken?.() || apiToken || 'default')
- }, []) // eslint-disable-line react-hooks/exhaustive-deps
+ const getRequestOptions = useCallback(
+ (): Partial<RequestInit> => buildResfulReactRequestOptions(hooks.useGetToken?.() || apiToken || token),
+ [apiToken, token, hooks]
+ ) // eslint-disable-line react-hooks/exhaustive-deps
 
  useEffect(() => {
  languageLoader(lang).then(setStrings)

web/src/RouteDefinitions.ts

@@ -9,6 +9,8 @@ interface PathProps {
  commitId?: string
 }
 
+interface QueryProps {}
+
 export const pathProps: Readonly<Required<PathProps>> = {
  accountId: ':accountId',
  orgIdentifier: ':orgIdentifier',
@@ -37,10 +39,6 @@ export default {
  ({ orgIdentifier, projectIdentifier }: PathProps) =>
  `/scm/orgs/${orgIdentifier}/projects/${projectIdentifier}/repos`
  ),
- toSCMNewRepo: withAccountId(
- ({ orgIdentifier, projectIdentifier }: PathProps) =>
- `/scm/orgs/${orgIdentifier}/projects/${projectIdentifier}/repos/new`
- ),
  toSCMRepoSettings: withAccountId(
  ({ orgIdentifier, projectIdentifier, repoName }: RequireField<PathProps, 'repoName'>) =>
  `/scm/orgs/${orgIdentifier}/projects/${projectIdentifier}/repos/${repoName}/settings`

web/src/RouteDestinations.tsx

@@ -4,7 +4,6 @@ import { SignIn } from 'pages/SignIn/SignIn'
 import { SignUp } from 'pages/SignUp/SignUp'
 import routes, { pathProps } from 'RouteDefinitions'
 import Welcome from 'views/Welcome/Welcome'
-import NewRepo from 'views/NewRepo/NewRepo'
 import Repos from 'views/Repos/Repos'
 import RepoSettings from 'views/RepoSettings/RepoSettings'
 import RepoFiles from 'views/RepoFiles/RepoFiles'
@@ -27,9 +26,6 @@ export const RouteDestinations: React.FC = React.memo(function RouteDestinations
  <Route path={routes.toSCMHome(pathProps)}>
  <Welcome />
  </Route>
- <Route path={routes.toSCMNewRepo(pathProps)}>
- <NewRepo />
- </Route>
  <Route path={routes.toSCMRepos(pathProps)} exact>
  <Repos />
  </Route>

web/src/bootstrap.tsx

@@ -9,6 +9,6 @@ import './bootstrap.scss'
 window.STRIP_SCM_PREFIX = true
 
 ReactDOM.render(
- <App standalone accountId="default" apiToken="default" hooks={{}} components={{}} />,
+ <App standalone accountId="default" apiToken="" hooks={{}} components={{}} />,
  document.getElementById('react-root')
 )

web/src/framework/strings/stringTypes.ts

@@ -3,29 +3,47 @@
  * Use the command `yarn strings` to regenerate this file.
  */
 export interface StringsMap {
+ addGitIgnore: string
+ addLicense: string
+ addReadMe: string
  cancel: string
  commits: string
  content: string
+ create: string
+ createRepo: string
+ description: string
  email: string
+ enterDescription: string
+ enterRepoName: string
  existingAccount: string
+ failedToCreateRepo: string
  files: string
  history: string
  name: string
  newFile: string
  newFolder: string
+ newRepo: string
  noAccount: string
+ none: string
+ ok: string
  pageNotFound: string
  password: string
  private: string
  public: string
  pullRequests: string
  'repos.activities': string
  'repos.data': string
+ 'repos.enterBranchName': string
  'repos.lastChange': string
  'repos.name': string
+ 'repos.noDataMessage': string
+ 'repos.noDataTitle': string
  'repos.updated': string
  repositories: string
+ search: string
  settings: string
  signIn: string
  signUp: string
+ 'validation.gitBranchNameInvalid': string
+ 'validation.namePatternIsNotValid': string
 }

web/src/hooks/useAPIToken.ts

@@ -1,6 +1,6 @@
 import { useLocalStorage } from 'hooks/useLocalStorage'
 
-const API_TOKEN_KEY = 'HARNESS_STANDALONE_APP_API_TOKEN'
+const API_TOKEN_KEY = 'HARNESS_SCM_STANDALONE_APP_API_TOKEN'
 
 /**
  * Get and Set API token to use in Restful React calls.

web/src/i18n/strings.en.yaml

@@ -9,6 +9,8 @@ public: Public
 private: Private
 cancel: Cancel
 name: Name
+search: Search
+description: Description
 repositories: Repositories
 files: Files
 commits: Commits
@@ -18,9 +20,26 @@ newFile: New File
 newFolder: New Folder
 content: Content
 history: History
+newRepo: New Repository
+createRepo: Create Repository
+enterRepoName: Enter Repository Name
+enterDescription: Enter a description (optional)
+addLicense: Add License
+none: None
+create: Create
+ok: OK
+addGitIgnore: Add a .gitignore
+addReadMe: Add a README file
+failedToCreateRepo: Failed to create Repository. Please try again.
 repos:
  name: Repo Name
  data: Repo Data
  activities: Monthly Activities
  updated: Updated Date
  lastChange: Last Change
+ noDataTitle: No Repository Found
+ noDataMessage: Create a new repository by clicking the button below.
+ enterBranchName: Enter a branch name
+validation:
+ namePatternIsNotValid: 'Name can only contain alphanumerics, . _ and -'
+ gitBranchNameInvalid: Branch name is invalid.

web/src/types/Repository.ts

@@ -0,0 +1,17 @@
+export interface Repository {
+ id: number
+ spaceId: number
+ pathName: string
+ path: string
+ name: string
+ description?: string
+ isPublic: boolean
+ createdBy: number
+ created: number
+ updated: number
+ forkId: number
+ numForks: number
+ numPulls: number
+ numClosedPulls: number
+ numOpenPulls: number
+}

web/src/utils/GitUtils.ts

@@ -0,0 +1,25 @@
+// Code copied from https://github.com/vweevers/is-git-ref-name-valid and
+// https://github.com/vweevers/is-git-branch-name-valid (MIT, © Vincent Weevers)
+// Last updated for git 2.29.0.
+
+import type { IconName } from '@harness/icons'
+
+// eslint-disable-next-line no-control-regex
+const badGitRefRegrex = /(^|[/.])([/.]|$)|^@$|@{|[\x00-\x20\x7f~^:?*[\\]|\.lock(\/|$)/
+const badGitBranchRegrex = /^(-|HEAD$)/
+
+function isGitRefValid(name: string, onelevel: boolean): boolean {
+ return !badGitRefRegrex.test(name) && (!!onelevel || name.includes('/'))
+}
+
+export function isGitBranchNameValid(name: string): boolean {
+ return isGitRefValid(name, true) && !badGitBranchRegrex.test(name)
+}
+
+export const GitIcon: Readonly<Record<string, IconName>> = {
+ FILE: 'file',
+ REPOSITORY: 'git-repo',
+ COMMIT: 'git-branch-existing',
+ PULL_REQUEST: 'git-pull',
+ SETTINGS: 'cog'
+}

web/src/utils/Utils.ts

@@ -5,7 +5,15 @@ import moment from 'moment'
 import { useEffect } from 'react'
 import { useAppContext } from 'AppContext'
 
+export const LIST_FETCHING_PAGE_SIZE = 20
+export const DEFAULT_DATE_FORMAT = 'MM/DD/YYYY hh:mm a'
+export const X_TOTAL = 'x-total'
+export const X_TOTAL_PAGES = 'x-total-pages'
+export const X_PER_PAGE = 'x-per-page'
 export type Unknown = any // eslint-disable-line @typescript-eslint/no-explicit-any
+export const DEFAULT_BRANCH_NAME = 'main'
+export const REGEX_VALID_REPO_NAME = /^[A-Za-z0-9_.-][A-Za-z0-9 _.-]*$/
+export const SUGGESTED_BRANCH_NAMES = ['main', 'master']
 
 /** This utility shows a toaster without being bound to any component.
  * It's useful to show cross-page/component messages */
@@ -25,7 +33,7 @@ export const MonacoEditorOptions = {
  codeLens: false,
  scrollBeyondLastLine: false,
  smartSelect: false,
- tabSize: 4,
+ tabSize: 2,
  insertSpaces: true,
  overviewRulerBorder: false
 }
@@ -45,13 +53,38 @@ export const deselectAllMonacoEditor = (editor?: EDITOR.IStandaloneCodeEditor):
  }, 0)
 }
 
-export const LIST_FETCHING_PAGE_SIZE = 20
-export const DEFAULT_DATE_FORMAT = 'MM/DD/YYYY hh:mm a'
-
 export const displayDateTime = (value: number): string | null => {
  return value ? moment.unix(value / 1000).format(DEFAULT_DATE_FORMAT) : null
 }
 
+const LOCALE = Intl.NumberFormat().resolvedOptions?.().locale || 'en-US'
+
+/**
+ * Format a timestamp to short format time (i.e: 7:41 AM)
+ * @param timestamp Timestamp
+ * @param timeStyle Optional DateTimeFormat's `timeStyle` option.
+ */
+export function formatTime(timestamp: number, timeStyle = 'short'): string {
+ return new Intl.DateTimeFormat(LOCALE, {
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore: TS built-in type for DateTimeFormat is not correct
+ timeStyle
+ }).format(new Date(timestamp))
+}
+
+/**
+ * Format a timestamp to medium format date (i.e: Jan 1, 2021)
+ * @param timestamp Timestamp
+ * @param dateStyle Optional DateTimeFormat's `dateStyle` option.
+ */
+export function formatDate(timestamp: number, dateStyle = 'medium'): string {
+ return new Intl.DateTimeFormat(LOCALE, {
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore: TS built-in type for DateTimeFormat is not correct
+ dateStyle
+ }).format(new Date(timestamp))
+}
+
 export enum Editions {
  ENTERPRISE = 'ENTERPRISE',
  TEAM = 'TEAM',

web/src/views/RepoFiles/RepoFiles.tsx

@@ -5,6 +5,7 @@ import SplitPane from 'react-split-pane'
 import { PopoverInteractionKind } from '@blueprintjs/core'
 import { useStrings } from 'framework/strings'
 import { ButtonRoleProps } from 'utils/Utils'
+import { GitIcon } from 'utils/GitUtils'
 import { ResourceTree } from './ResourceTree/ResourceTree'
 import { ResourceContent } from './ResourceContent/ResourceContent'
 import css from './RepoFiles.module.scss'
@@ -27,7 +28,7 @@ export default function RepoFiles(): JSX.Element {
  <Text
  inline
  className={css.repoDropdown}
- icon="git-repo"
+ icon={GitIcon.REPOSITORY}
  iconProps={{
  size: 14,
  color: Color.GREY_500,
@@ -60,28 +61,28 @@ export default function RepoFiles(): JSX.Element {
  id: 'files',
  title: getString('files'),
  panel: <Files />,
- iconProps: { name: 'file' },
+ iconProps: { name: GitIcon.FILE },
  disabled: false
  },
  {
  id: 'commits',
  title: getString('commits'),
  panel: <Commits />,
- iconProps: { name: 'git-branch-existing' },
+ iconProps: { name: GitIcon.COMMIT },
  disabled: true
  },
  {
  id: 'pull-requests',
  title: getString('pullRequests'),
  panel: <PullRequests />,
- iconProps: { name: 'git-pull' },
+ iconProps: { name: GitIcon.PULL_REQUEST },
  disabled: true
  },
  {
  id: 'settings',
  title: getString('settings'),
  panel: <Settings />,
- iconProps: { name: 'cog' },
+ iconProps: { name: GitIcon.SETTINGS },
  disabled: true
  }
  ]}></Tabs>