Timeline load - fixing disappearing future

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.865",
+  "version": "1.0.916",
   "main": "src/index.jsx",
   "license": "MIT",
   "homepage": "https://github.com/bldrs-ai/Share",

src/Components/ApplicationError.jsx

@@ -13,21 +13,21 @@ const ApplicationError = () => {
         padding: '20px',
       }}
     >
-      <Typography variant={'body1'} sx={{fontWeight: 600, pb: 2}}>
+      <Typography variant={'body1'} sx={{fontWeight: 600, pb: 2}} color='primary'>
         Oh no!
       </Typography>
 
-      <Typography variant={'body1'}>
+      <Typography variant={'body1'} color='primary'>
         We&apos;re not quite sure what went wrong.
       </Typography>
 
-      <Typography sx={{pb: 2}}>
+      <Typography sx={{pb: 2}} color='primary'>
         Not to worry.<br/>
         You can <a href="/">click here to start a new session</a>.
       </Typography>
 
       <Box>
-        <a href="/"><Logo style={{width: '30px'}}/></a>
+        <a href="/"><Logo style={{width: '24px'}}/></a>
       </Box>
     </Paper>
   )

src/Components/BranchesControl.test.jsx

@@ -43,7 +43,7 @@ describe('BranchControl', () => {
       result.current.setModelPath(MOCK_MODEL_PATH_LOCAL)
     })
     render(<ShareMock><BranchesControl/></ShareMock>)
-    const branchDropDown = screen.queryByText('Git Branches / Project Versions')
+    const branchDropDown = screen.queryByText('BRANCHES')
     await waitFor(() => {
       expect(branchDropDown).toBeNull()
     })
@@ -62,7 +62,7 @@ describe('BranchControl', () => {
           )
         }),
     )
-    const branchDropDown = screen.queryByText('Git Branches / Project Versions')
+    const branchDropDown = screen.queryByText('BRANCHES')
     await waitFor(() => {
       expect(branchDropDown).toBeNull()
     })

src/Components/ControlsGroup.jsx

@@ -57,7 +57,7 @@ export default function ControlsGroup({navigate, isRepoActive}) {
       <SaveModelControl navigate={navigate}/>
       {isRepoActive &&
         <TooltipIconButton
-          title='Project History'
+          title='Versions'
           icon={<HistoryIcon className='icon-share' color='secondary'/>}
           placement='bottom'
           selected={isVersionHistoryVisible}

src/Components/OperationsGroup.test.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import {__getIfcViewerAPIExtendedMockSingleton} from 'web-ifc-viewer'
+import {act, render, fireEvent, renderHook} from '@testing-library/react'
+import ShareMock from '../ShareMock'
+import useStore from '../store/useStore'
+import OperationsGroup from './OperationsGroup'
+
+
+describe('OperationsGroup', () => {
+  const deselectItems = jest.fn()
+  let viewer
+
+  beforeAll(async () => {
+    const {result} = renderHook(() => useStore((state) => state))
+    viewer = __getIfcViewerAPIExtendedMockSingleton()
+    viewer.isolator = {
+      toggleIsolationMode: jest.fn(),
+      hideSelectedElements: jest.fn(),
+      unHideAllElements: jest.fn(),
+    }
+    await act(() => {
+      result.current.setViewer(viewer)
+    })
+  })
+
+  it('should render and trigger Properties button when a selected element is present', async () => {
+    const {result} = renderHook(() => useStore((state) => state))
+    await act(() => {
+      result.current.setSelectedElement({id: 123})
+    })
+    const {queryByTitle} = render(
+        <ShareMock
+          initialEntries={['/v/p/index.ifc#p:x']}
+        >
+          <OperationsGroup deselectItems={deselectItems}/>
+        </ShareMock>,
+    )
+    const propertiesButton = queryByTitle('Properties')
+    fireEvent.click(propertiesButton)
+    expect(propertiesButton).toBeInTheDocument()
+  })
+})

src/Components/Panel.jsx

@@ -16,16 +16,16 @@ import CloseIcon from '@mui/icons-material/Close'
  * @param {React.ReactNode} content The content to be displayed in the panel.
  * @return {React.ReactElement} A rendered Panel component.
  */
-export default function Panel({title, onClose, content, testId = ''}) {
+export default function Panel({title, onClose, content, testId = '', action = null}) {
   const theme = useTheme()
   return (
     <Paper
-      data-testId={testId}
+      data-testid={testId}
       sx={{
         'overflowY': 'scroll',
         'maxHeight': '490px',
         'width': '100%',
-        'opacity': .9,
+        'opacity': .96,
         'position': 'relative',
         'borderRadius': '5px',
         'backgroundColor': theme.palette.scene.background,
@@ -47,11 +47,19 @@ export default function Panel({title, onClose, content, testId = ''}) {
         }}
       >
         <Typography variant='body1' sx={{marginLeft: '.9em', textTransform: 'uppercase'}}>{title}</Typography>
-        <Box sx={{marginRight: '.3em'}}>
+        <Stack
+          direction='row'
+          justifyContent={'center'}
+          alignItems={'center'}
+          sx={{marginRight: '.3em'}}
+        >
+          <Box>
+            {action}
+          </Box>
           <IconButton aria-label="close" size="small" onClick={onClose} sx={{borderRadius: '5px'}}>
             <CloseIcon fontSize="small" color='secondary'/>
           </IconButton>
-        </Box>
+        </Stack>
       </Stack>
       <Box sx={{padding: '1px 0px'}}>
         {content}

src/Components/Timeline.fixture.jsx → src/Components/Versions/Timeline.fixture.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import {ThemeCtx} from '../theme/Theme.fixture'
-import Timeline from './Timeline'
+import {ThemeCtx} from '../../theme/Theme.fixture'
+import VersionsTimeline from './VersionsTimeline'
 
 
 const commitData = [
@@ -22,8 +22,9 @@ const commitData = [
   },
 ]
 
+
 export default (
   <ThemeCtx>
-    <Timeline commitData={commitData}/>
+    <VersionsTimeline commitData={commitData}/>
   </ThemeCtx>
 )

src/Components/Versions/VersionsContainer.jsx

@@ -0,0 +1,102 @@
+import React, {useState, useEffect} from 'react'
+import {useNavigate} from 'react-router-dom'
+import IconButton from '@mui/material/IconButton'
+import Tooltip from '@mui/material/Tooltip'
+import useStore from '../../store/useStore'
+import {getCommitsForFile} from '../../utils/GitHub'
+import {assertDefined} from '../../utils/assert'
+import debug from '../../utils/debug'
+import {navigateBaseOnModelPath} from '../../utils/location'
+import Panel from '../Panel'
+import VersionsTimeline from './VersionsTimeline'
+import RestartAltIcon from '@mui/icons-material/RestartAlt'
+
+
+/**
+ * VersionsContainer displays a series of versions in a timeline format.
+ * Each version corresponds to a commit, and this component fetches
+ * commit data for the provided filepath and displays it.
+ *
+ * @param {string} filePath The file for which commits are fetched.
+ * @param {string} current The current branch or sha, to indicate is active in UI.
+ * @return {object} A timeline panel of versions.
+ */
+export default function VersionsContainer({filePath, currentRef}) {
+  assertDefined(filePath, currentRef)
+  const [commitData, setCommitData] = useState([])
+  const accessToken = useStore((state) => state.accessToken)
+  const repository = useStore((state) => state.repository)
+  const modelPath = useStore((state) => state.modelPath)
+  const toggleIsVersionHistoryVisible = useStore((state) => state.toggleIsVersionHistoryVisible)
+  const navigate = useNavigate()
+
+
+  useEffect(() => {
+    const fetchCommits = async () => {
+      try {
+        const commits = await getCommitsForFile(repository, filePath, accessToken)
+        if (commits) {
+          const versionsInfo = commits.map((entry) => {
+            const extractedData = {
+              authorName: entry.commit.author.name,
+              commitMessage: entry.commit.message,
+              commitDate: entry.commit.author.date,
+              sha: entry.sha,
+            }
+            return extractedData
+          })
+          setCommitData(versionsInfo)
+        }
+      } catch (error) {
+        debug().log(error)
+      }
+    }
+    fetchCommits()
+  }, [repository, filePath, accessToken])
+
+  /**
+   * This callBack navigated to the selected commit
+   *
+   * @param {string} index active commit index
+   */
+  const commitNavigate = (index) => {
+    const sha = commitData[index].sha
+    if (modelPath) {
+      const commitPath = navigateBaseOnModelPath(modelPath.org, modelPath.repo, sha, modelPath.filepath)
+      navigate({
+        pathname: commitPath,
+      })
+    }
+  }
+  const navigateToMain = () => {
+    if (modelPath) {
+      const mainPath = navigateBaseOnModelPath(modelPath.org, modelPath.repo, 'main', modelPath.filepath)
+      navigate({
+        pathname: mainPath,
+      })
+    }
+  }
+
+
+  return (
+    <Panel
+      content={
+        <VersionsTimeline
+          commitData={commitData}
+          currentRef={currentRef}
+          commitNavigateCb={commitNavigate}
+        />
+      }
+      testId='Version Panel'
+      title='Versions'
+      action={
+        <Tooltip title="Navigate to the tip of version history">
+          <IconButton aria-label="navigate_to_tip" size="small" onClick={navigateToMain} >
+            <RestartAltIcon fontSize="inherit"/>
+          </IconButton>
+        </Tooltip>
+      }
+      onClose={toggleIsVersionHistoryVisible}
+    />
+  )
+}

src/Components/Versions/VersionsContainer.test.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import {render, renderHook, act} from '@testing-library/react'
+import ShareMock from '../../ShareMock'
+import useStore from '../../store/useStore'
+import {
+  MOCK_MODEL_PATH_GIT,
+  MOCK_REPOSITORY,
+} from '../../utils/GitHub'
+import VersionsContainer from './VersionsContainer'
+
+
+describe('VersionsContainer', () => {
+  it('renders the panel', async () => {
+    const {result} = renderHook(() => useStore((state) => state))
+    await act(() => {
+      result.current.setModelPath(MOCK_MODEL_PATH_GIT)
+      result.current.setRepository(MOCK_REPOSITORY)
+    })
+    const {getByText} = render(
+        <ShareMock>
+          <VersionsContainer filePath="/ZGRAGGEN.ifc" currentRef={'main'}/>
+        </ShareMock>,
+    )
+    const dialogTitle = getByText('Versions')
+    expect(dialogTitle).toBeInTheDocument()
+  })
+})