feat: [CODE-1258]: made window title more meaningful for CODE module (#1058)

web/src/App.tsx

@@ -23,7 +23,7 @@ import { FocusStyleManager } from '@blueprintjs/core'
 import AppErrorBoundary from 'framework/AppErrorBoundary/AppErrorBoundary'
 import { AppContextProvider, defaultCurrentUser } from 'AppContext'
 import type { AppProps } from 'AppProps'
-import { buildResfulReactRequestOptions, handle401 } from 'AppUtils'
+import { buildRestfulReactRequestOptions, handle401 } from 'AppUtils'
 import { RouteDestinations } from 'RouteDestinations'
 import { routes as _routes } from 'RouteDefinitions'
 import { getConfig } from 'services/config'
@@ -49,7 +49,7 @@ const App: React.FC<AppProps> = React.memo(function App({
 }: AppProps) {
   const [strings, setStrings] = useState<LanguageRecord>()
   const getRequestOptions = useCallback(
-    (): Partial<RequestInit> => buildResfulReactRequestOptions(hooks?.useGetToken?.() || ''),
+    (): Partial<RequestInit> => buildRestfulReactRequestOptions(hooks?.useGetToken?.() || ''),
     [hooks]
   )
   const routingId = useMemo(() => (standalone ? '' : space.split('/').shift() || ''), [standalone, space])

web/src/AppUtils.ts

@@ -40,9 +40,9 @@ export function handle401() {
  * service happen here.
  *
  * @param token API token
- * @returns Resful React RequestInit object.
+ * @returns Restful React RequestInit object.
  */
-export function buildResfulReactRequestOptions(token?: string): Partial<RequestInit> {
+export function buildRestfulReactRequestOptions(token?: string): Partial<RequestInit> {
   const headers: RequestInit['headers'] = {}
 
   if (token?.length) {

web/src/RouteDestinations.tsx

@@ -159,7 +159,7 @@ export const RouteDestinations: React.FC = React.memo(function RouteDestinations
             repoPath,
             webhookId: pathProps.webhookId
           })}>
-          <LayoutWithSideNav title={getString('pageTitle.webhookDetail')}>
+          <LayoutWithSideNav title={getString('webhookDetails')}>
             <WebhookDetails />
           </LayoutWithSideNav>
         </Route>
@@ -266,7 +266,7 @@ export const RouteDestinations: React.FC = React.memo(function RouteDestinations
             repoPath,
             commitRef: pathProps.commitRef
           })}>
-          <LayoutWithSideNav title={getString('pageTitle.commits')}>
+          <LayoutWithSideNav title={getString('commit')}>
             <RepositoryCommit />
           </LayoutWithSideNav>
         </Route>
@@ -276,7 +276,7 @@ export const RouteDestinations: React.FC = React.memo(function RouteDestinations
             repoPath,
             commitRef: pathProps.commitRef
           })}>
-          <LayoutWithSideNav title={getString('pageTitle.commits')}>
+          <LayoutWithSideNav title={getString('commits')}>
             <RepositoryCommits />
           </LayoutWithSideNav>
         </Route>
@@ -313,7 +313,7 @@ export const RouteDestinations: React.FC = React.memo(function RouteDestinations
             gitRef: pathProps.gitRef,
             resourcePath: pathProps.resourcePath
           })}>
-          <LayoutWithSideNav title={getString('pageTitle.editFile')}>
+          <LayoutWithSideNav title={getString('editFile')}>
             <RepositoryFileEdit />
           </LayoutWithSideNav>
         </Route>

web/src/components/CommitInfo/CommitInfo.tsx

@@ -26,6 +26,7 @@ import type { TypesCommit, TypesRepository } from 'services/code'
 import { CommitActions } from 'components/CommitActions/CommitActions'
 import { LIST_FETCHING_LIMIT } from 'utils/Utils'
 import { TimePopoverWithLocal } from 'utils/timePopoverLocal/TimePopoverWithLocal'
+import { useDocumentTitle } from 'hooks/useDocumentTitle'
 import css from './CommitInfo.module.scss'
 
 const CommitInfo = (props: { repoMetadata: TypesRepository; commitRef: string }) => {
@@ -41,15 +42,15 @@ const CommitInfo = (props: { repoMetadata: TypesRepository; commitRef: string })
     },
     lazy: !repoMetadata
   })
-
   const commitURL = routes.toCODECommit({
     repoPath: repoMetadata.path as string,
     commitRef: commitRef
   })
-
-  const commitData = useMemo(() => {
-    return commits?.commits?.filter(commit => commit.sha === commitRef)
-  }, [commitRef, commits?.commits])
+  const commitData = useMemo(
+    () => commits?.commits?.filter(commit => commit.sha === commitRef)?.[0],
+    [commitRef, commits?.commits]
+  )
+  useDocumentTitle(defaultTo(commitData?.title, getString('commit')))
 
   return (
     <>
@@ -63,7 +64,7 @@ const CommitInfo = (props: { repoMetadata: TypesRepository; commitRef: string })
                 iconProps={{ size: 16 }}
                 padding="medium"
                 color="black">
-                {commitData[0] ? commitData[0]?.title : ''}
+                {defaultTo(commitData?.title, '')}
               </Text>
               <FlexExpander />
               <Button
@@ -83,15 +84,15 @@ const CommitInfo = (props: { repoMetadata: TypesRepository; commitRef: string })
           </Container>
           <Container className={css.infoContainer}>
             <Layout.Horizontal className={css.alignContent} padding={{ left: 'small', right: 'medium' }}>
-              <Avatar hoverCard={false} size="small" name={commitData[0] ? commitData[0].author?.identity?.name : ''} />
+              <Avatar hoverCard={false} size="small" name={defaultTo(commitData.author?.identity?.name, '')} />
               <Text className={css.infoText} color={Color.BLACK}>
-                {commitData[0] ? commitData[0].author?.identity?.name : ''}
+                {defaultTo(commitData.author?.identity?.name, '')}
               </Text>
               <Text font={{ size: 'small' }} padding={{ left: 'small', top: 'medium', bottom: 'medium' }}>
                 {getString('committed')}
                 <TimePopoverWithLocal
                   padding={{ left: 'xsmall' }}
-                  time={defaultTo(commitData[0]?.committer?.when as unknown as number, 0)}
+                  time={defaultTo(commitData?.committer?.when as unknown as number, 0)}
                   inline={false}
                   font={{ size: 'small' }}
                   color={Color.GREY_500}

web/src/framework/strings/stringTypes.ts

@@ -296,6 +296,7 @@ export interface StringsMap {
   'exportSpace.exportCompleted': string
   'exportSpace.exportRepo': string
   'exportSpace.exportRepoCompleted': string
+  'exportSpace.harness': string
   'exportSpace.newProject': string
   'exportSpace.organization': string
   'exportSpace.projectName': string
@@ -490,10 +491,9 @@ export interface StringsMap {
   'pageTitle.accessControl': string
   'pageTitle.branches': string
   'pageTitle.changePassword': string
-  'pageTitle.commits': string
   'pageTitle.compare': string
   'pageTitle.createWebhook': string
-  'pageTitle.editFile': string
+  'pageTitle.editFileLocation': string
   'pageTitle.executions': string
   'pageTitle.home': string
   'pageTitle.pipelines': string
@@ -510,7 +510,6 @@ export interface StringsMap {
   'pageTitle.tags': string
   'pageTitle.userProfile': string
   'pageTitle.users': string
-  'pageTitle.webhookDetail': string
   'pageTitle.webhooks': string
   password: string
   passwordApi: string

web/src/hooks/useDocumentTitle.tsx

@@ -15,18 +15,29 @@
  */
 
 import { useEffect } from 'react'
+import { useParams } from 'react-router-dom'
 import { useStrings } from 'framework/strings'
+import { useAppContext } from 'AppContext'
+import type { CODEProps } from 'RouteDefinitions'
 
-export function useDocumentTitle(title: string) {
+type Title = string | string[]
+
+export function useDocumentTitle(title: Title) {
   const { getString } = useStrings()
+  const { standalone } = useAppContext()
+  const { repoName } = useParams<CODEProps>()
 
   useEffect(() => {
     const _title = document.title
+    const titleArray = Array.isArray(title) ? [...title] : [title]
+    if (repoName) {
+      titleArray.push(repoName)
+    }
 
-    document.title = `${title} - ${getString('gitness')}`
+    document.title = [...titleArray, standalone ? getString('gitness') : getString('exportSpace.harness')].join(' | ')
 
     return () => {
       document.title = _title
     }
-  }, [title, getString])
+  }, [title, getString, repoName, standalone])
 }

web/src/i18n/strings.en.yaml

@@ -91,14 +91,12 @@ pageTitle:
   pullRequest: Pull Request
   pullRequests: Pull Requests
   createWebhook: Create Webhook
-  webhookDetail: Webhook Detail
   webhooks: Webhooks
   repositorySettings: Repository Settings
   repositories: Repositories
-  commits: Commits
   branches: Branches
   tags: Tags
-  editFile: Edit File
+  editFileLocation: Editing {{{path}}}
   repository: Repository
   home: Home
   users: Users
@@ -844,6 +842,7 @@ step:
 stepCategory:
   select: Select step category
 exportSpace:
+  harness: Harness
   accIdRequired: Account ID is required
   accesstokenReq: Access token is required
   accIdLabel: 'Harness Account Id'

web/src/pages/PullRequest/PullRequestTitle.tsx

@@ -19,11 +19,13 @@ import { Container, Text, Layout, Button, ButtonVariation, ButtonSize, TextInput
 import { FontVariation } from '@harnessio/design-system'
 import { useMutate } from 'restful-react'
 import { Match, Truthy, Else } from 'react-jsx-match'
+import { compact } from 'lodash-es'
 import { useStrings } from 'framework/strings'
 import { ButtonRoleProps, getErrorMessage } from 'utils/Utils'
 import type { GitInfoProps } from 'utils/GitUtils'
 import type { TypesPullReq } from 'services/code'
 import { PipeSeparator } from 'components/PipeSeparator/PipeSeparator'
+import { useDocumentTitle } from 'hooks/useDocumentTitle'
 import css from './PullRequest.module.scss'
 
 interface PullRequestTitleProps extends TypesPullReq, Pick<GitInfoProps, 'repoMetadata'> {
@@ -68,6 +70,8 @@ export const PullRequestTitle: React.FC<PullRequestTitleProps> = ({
     }
   }, [title, edit])
 
+  useDocumentTitle(compact([original, `(#${number})`]).join(' '))
+
   return (
     <Layout.Horizontal spacing="small" className={css.prTitle}>
       <Match expr={edit}>

web/src/pages/Repository/RepositoryContent/ContentHeader/ContentHeader.tsx

@@ -21,6 +21,7 @@ import { Icon } from '@harnessio/icons'
 import { Color } from '@harnessio/design-system'
 import { Breadcrumbs, IBreadcrumbProps } from '@blueprintjs/core'
 import { Link, useHistory } from 'react-router-dom'
+import { compact, isEmpty } from 'lodash-es'
 import { useStrings } from 'framework/strings'
 import { useAppContext } from 'AppContext'
 import { CloneButtonTooltip } from 'components/CloneButtonTooltip/CloneButtonTooltip'
@@ -31,6 +32,7 @@ import { useCreateBranchModal } from 'components/CreateBranchModal/CreateBranchM
 import { useGetSpaceParam } from 'hooks/useGetSpaceParam'
 import { permissionProps } from 'utils/Utils'
 import CodeSearch from 'components/CodeSearch/CodeSearch'
+import { useDocumentTitle } from 'hooks/useDocumentTitle'
 import css from './ContentHeader.module.scss'
 
 export function ContentHeader({
@@ -44,6 +46,8 @@ export function ContentHeader({
   const history = useHistory()
   const _isDir = isDir(resourceContent)
   const space = useGetSpaceParam()
+  const repoPath = compact([repoMetadata.uid, resourceContent.path])
+  useDocumentTitle(isEmpty(resourceContent.path) ? getString('pageTitle.repository') : repoPath.join('/'))
 
   const permPushResult = hooks?.usePermissionTranslate?.(
     {

web/src/pages/RepositoryFileEdit/RepositoryFileEditHeader/RepositoryFileEditHeader.tsx

@@ -23,6 +23,7 @@ import { useStrings } from 'framework/strings'
 import { useGetSpaceParam } from 'hooks/useGetSpaceParam'
 import { GitInfoProps, isFile } from 'utils/GitUtils'
 import { useAppContext } from 'AppContext'
+import { useDocumentTitle } from 'hooks/useDocumentTitle'
 import css from './RepositoryFileEditHeader.module.scss'
 
 interface RepositoryFileEditHeaderProps extends Pick<GitInfoProps, 'repoMetadata'> {
@@ -36,6 +37,9 @@ export const RepositoryFileEditHeader: React.FC<RepositoryFileEditHeaderProps> =
   const { getString } = useStrings()
   const space = useGetSpaceParam()
   const { routes } = useAppContext()
+  useDocumentTitle(
+    getString(isFile(resourceContent) ? 'pageTitle.editFileLocation' : 'newFile', { path: resourceContent?.path })
+  )
 
   return (
     <Container className={css.header}>