diff --git a/web/package.json b/web/package.json index 257f4cbac..6d08363bb 100644 --- a/web/package.json +++ b/web/package.json @@ -43,7 +43,7 @@ "@codemirror/state": "^6.2.0", "@codemirror/view": "^6.9.6", "@harness/design-system": "1.4.0", - "@harness/icons": "1.143.0", + "@harness/icons": "1.149.0", "@harness/ng-tooltip": ">=1.31.25", "@harness/telemetry": ">=1.0.42", "@harness/uicore": "3.131.1", diff --git a/web/src/components/CommitsView/CommitsView.module.scss b/web/src/components/CommitsView/CommitsView.module.scss index 4569f0f3a..dbde86a30 100644 --- a/web/src/components/CommitsView/CommitsView.module.scss +++ b/web/src/components/CommitsView/CommitsView.module.scss @@ -44,3 +44,45 @@ padding-left: var(--spacing-xsmall) !important; padding-right: var(--spacing-xsmall); } + +.fileButton { + svg { + > path:first-child { + fill: unset !important; + } + } +} + +.layout { + height: 22px; + display: inline-flex; + justify-content: center; + align-items: center; + border: 1px solid var(--grey-200); + background-color: var(--grey-50) !important; + border-radius: 4px; + padding-left: var(--spacing-small) !important; + + &.noCopy { + padding-right: var(--spacing-small) !important; + } + + a span { + font-size: var(--font-size-small) !important; + color: var(--primary-7); + font-family: var(--font-family-mono) !important; + } + + span#commitFileButton { + --button-height: 22px !important; + border-radius: 0 !important; + border-right: 1px solid var(--grey-200) !important; + padding-right: 4px !important; + padding-bottom: 2px !important ; + cursor: pointer; + } + button#commitRepoButton { + padding-bottom: 2px !important; + padding-right: 4px !important; + } +} \ No newline at end of file diff --git a/web/src/components/CommitsView/CommitsView.module.scss.d.ts b/web/src/components/CommitsView/CommitsView.module.scss.d.ts index 4ce27d6aa..4f1550997 100644 --- a/web/src/components/CommitsView/CommitsView.module.scss.d.ts +++ b/web/src/components/CommitsView/CommitsView.module.scss.d.ts @@ -7,5 +7,10 @@ declare const styles: { readonly rowText: string readonly label: string readonly refreshIcon: string + readonly fileButton: string + readonly layout: string + readonly noCopy: string + readonly commitFileButton: string + readonly commitRepoButton: string } export default styles diff --git a/web/src/components/CommitsView/CommitsView.tsx b/web/src/components/CommitsView/CommitsView.tsx index 5dcecb910..4bafea7c8 100644 --- a/web/src/components/CommitsView/CommitsView.tsx +++ b/web/src/components/CommitsView/CommitsView.tsx @@ -10,18 +10,20 @@ import { ButtonSize, Button, FlexExpander, - StringSubstitute + StringSubstitute, + Icon, + Popover } from '@harness/uicore' import type { CellProps, Column } from 'react-table' import { noop, orderBy } from 'lodash-es' -import { Link } from 'react-router-dom' +import { Link, useHistory } from 'react-router-dom' import { useStrings } from 'framework/strings' import { useAppContext } from 'AppContext' import type { TypesCommit } from 'services/code' import { CommitActions } from 'components/CommitActions/CommitActions' import { NoResultCard } from 'components/NoResultCard/NoResultCard' import { ThreadSection } from 'components/ThreadSection/ThreadSection' -import { formatDate } from 'utils/Utils' +import { FileSection, formatDate } from 'utils/Utils' import { CodeIcon, GitInfoProps } from 'utils/GitUtils' import type { CODERoutes } from 'RouteDefinitions' import css from './CommitsView.module.scss' @@ -32,6 +34,10 @@ interface CommitsViewProps extends Pick { emptyMessage: string prHasChanged?: boolean handleRefresh?: () => void + showFileHistoryIcons?: boolean + gitRef?: string + resourcePath?: string + setActiveTab?: React.Dispatch> } export function CommitsView({ @@ -40,8 +46,14 @@ export function CommitsView({ emptyTitle, emptyMessage, handleRefresh = noop, - prHasChanged + prHasChanged, + showFileHistoryIcons = false, + gitRef = '', + resourcePath = '', + setActiveTab }: CommitsViewProps) { + console.log(repoMetadata, commits, gitRef, resourcePath) + const history = useHistory() const { getString } = useStrings() const { routes } = useAppContext() const columns: Column[] = useMemo( @@ -86,9 +98,66 @@ export function CommitsView({ /> ) } + }, + { + id: 'buttons', + width: showFileHistoryIcons ? '60px' : '0px', + Cell: ({ row }: CellProps) => { + if (showFileHistoryIcons) { + return ( + + + + {getString('viewFile')} + + } + interactionKind="hover"> + { + history.push( + routes.toCODERepository({ + repoPath: repoMetadata.path as string, + gitRef: row.original.sha, + resourcePath + }) + ) + if(setActiveTab){ + setActiveTab(FileSection.CONTENT) + } + }} + /> + +