From 3f7fc109d019e07b742132dcedd3e839e1c10a99 Mon Sep 17 00:00:00 2001 From: Tan Nhu Date: Tue, 1 Nov 2022 00:53:46 -0700 Subject: [PATCH] Branch search and styles (#50) * Add LatestCommit component * Add branches search * Proper link for root --- web/package.json | 8 +-- .../NewRepoModalButton/NewRepoModalButton.tsx | 5 +- .../ContentHeader/ContentHeader.tsx | 51 +++++++++++----- .../FileContent/FileContent.tsx | 36 +++++++----- .../FolderContent/FolderContent.module.scss | 21 +++---- .../FolderContent.module.scss.d.ts | 3 +- .../FolderContent/FolderContent.tsx | 58 +++++-------------- .../LatestCommit/LatestCommit.module.scss | 27 +++++++++ .../LatestCommit.module.scss.d.ts | 9 +++ .../LatestCommit/LatestCommit.tsx | 47 +++++++++++++++ web/src/utils/GitUtils.ts | 3 +- web/src/utils/Utils.ts | 3 +- web/yarn.lock | 26 ++++----- 13 files changed, 188 insertions(+), 109 deletions(-) create mode 100644 web/src/pages/Repository/RepositoryContent/LatestCommit/LatestCommit.module.scss create mode 100644 web/src/pages/Repository/RepositoryContent/LatestCommit/LatestCommit.module.scss.d.ts create mode 100644 web/src/pages/Repository/RepositoryContent/LatestCommit/LatestCommit.tsx diff --git a/web/package.json b/web/package.json index ff8c897c4..aa33e2cee 100644 --- a/web/package.json +++ b/web/package.json @@ -38,13 +38,13 @@ "@blueprintjs/select": "3.12.3", "@emotion/core": "^10.0.28", "@emotion/styled": "^10.0.27", - "@harness/design-system": "1.0.0", - "@harness/icons": "^1.59.0", + "@harness/design-system": "1.4.0", + "@harness/icons": "1.71.0", "@harness/monaco-yaml": ">=1.0.0", "@harness/ng-tooltip": ">=1.31.25", "@harness/telemetry": ">=1.0.42", - "@harness/uicore": "3.75.0", - "@harness/use-modal": ">=1.1.0", + "@harness/uicore": "3.84.0", + "@harness/use-modal": "1.3.0", "@popperjs/core": "^2.4.2", "@projectstorm/react-diagrams-core": "^6.6.0", "@uiw/react-markdown-preview": "^4.1.2", diff --git a/web/src/components/NewRepoModalButton/NewRepoModalButton.tsx b/web/src/components/NewRepoModalButton/NewRepoModalButton.tsx index c24b2ce83..f563aed59 100644 --- a/web/src/components/NewRepoModalButton/NewRepoModalButton.tsx +++ b/web/src/components/NewRepoModalButton/NewRepoModalButton.tsx @@ -90,10 +90,7 @@ export const NewRepoModalButton: React.FC = ({ const { showError } = useToaster() const { mutate: createRepo, loading: submitLoading } = useMutate({ verb: 'POST', - path: `/api/v1/repos?spacePath=${space}`, - queryParams: { - // spacePath: space - } + path: `/api/v1/repos?spacePath=${space}` }) const { data: gitignores, diff --git a/web/src/pages/Repository/RepositoryContent/ContentHeader/ContentHeader.tsx b/web/src/pages/Repository/RepositoryContent/ContentHeader/ContentHeader.tsx index 32cd678bc..ada318338 100644 --- a/web/src/pages/Repository/RepositoryContent/ContentHeader/ContentHeader.tsx +++ b/web/src/pages/Repository/RepositoryContent/ContentHeader/ContentHeader.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useMemo, useState } from 'react' +import React, { ChangeEvent, useEffect, useMemo, useState } from 'react' import { Container, Layout, @@ -19,6 +19,8 @@ import { useGet } from 'restful-react' import { useStrings } from 'framework/strings' import { useAppContext } from 'AppContext' import type { RepoBranch, TypesRepository } from 'services/scm' +import { BRANCH_PER_PAGE } from 'utils/Utils' +import { GitIcon } from 'utils/GitUtils' import css from './ContentHeader.module.scss' interface ContentHeaderProps { @@ -31,11 +33,14 @@ export function ContentHeader({ repoMetadata, gitRef, resourcePath = '' }: Conte const { getString } = useStrings() const { routes } = useAppContext() const history = useHistory() - // const [searchTerm, setSearchTerm] = useState('README.md') - const [branch, setBranch] = useState(gitRef || repoMetadata.defaultBranch) - const { data } = useGet({ - path: `/api/v1/repos/${repoMetadata.path}/+/branches?sort=date&direction=desc&per_page=20&page=1` - }) + const [query, setQuery] = useState('') + const [activeBranch, setActiveBranch] = useState(gitRef || repoMetadata.defaultBranch) + const path = useMemo( + () => + `/api/v1/repos/${repoMetadata.path}/+/branches?sort=date&direction=desc&per_page=${BRANCH_PER_PAGE}&page=1&query=${query}`, + [query, repoMetadata.path] + ) + const { data, loading } = useGet({ path }) // defaultBranches is computed using repository default branch, and gitRef in URL, if it exists const defaultBranches = useMemo( () => [repoMetadata.defaultBranch].concat(gitRef ? gitRef : []), @@ -60,11 +65,29 @@ export function ContentHeader({ repoMetadata, gitRef, resourcePath = '' }: Conte + ), + placeholder: getString('search'), + onInput: (event: ChangeEvent) => { + if (event.target.value !== query) { + setQuery(event.target.value) + } + }, + onBlur: (event: ChangeEvent) => { + setTimeout(() => { + setQuery(event.target.value || '') + }, 250) + } + } + }} onChange={({ value: switchBranch }) => { - setBranch(switchBranch as string) + setActiveBranch(switchBranch as string) history.push( routes.toSCMRepository({ repoPath: repoMetadata.path as string, @@ -77,23 +100,23 @@ export function ContentHeader({ repoMetadata, gitRef, resourcePath = '' }: Conte /> - + / /}> - {resourcePath.split('/').map((path, index, paths) => { + {resourcePath.split('/').map((_path, index, paths) => { const pathAtIndex = paths.slice(0, index + 1).join('/') return ( - {path} + {_path} ) })} @@ -117,3 +140,5 @@ export function ContentHeader({ repoMetadata, gitRef, resourcePath = '' }: Conte ) } + +// TODO: Optimize branch fetching when first fetch return less than request PER_PAGE diff --git a/web/src/pages/Repository/RepositoryContent/FileContent/FileContent.tsx b/web/src/pages/Repository/RepositoryContent/FileContent/FileContent.tsx index e30a523b3..606d9f75f 100644 --- a/web/src/pages/Repository/RepositoryContent/FileContent/FileContent.tsx +++ b/web/src/pages/Repository/RepositoryContent/FileContent/FileContent.tsx @@ -4,6 +4,7 @@ import { SourceCodeViewer } from 'components/SourceCodeViewer/SourceCodeViewer' import type { OpenapiGetContentOutput, RepoFileContent } from 'services/scm' import { GitIcon } from 'utils/GitUtils' import { filenameToLanguage } from 'utils/Utils' +import { LatestCommit } from '../LatestCommit/LatestCommit' import css from './FileContent.module.scss' interface FileContentProps { @@ -12,22 +13,25 @@ interface FileContentProps { export function FileContent({ contentInfo }: FileContentProps): JSX.Element { return ( - - - {contentInfo.name} - -