Merge pull request #1297 from pablo-mayrgundter/1295-versions-not-dis…

…playing

* versions: fix mobile VersionPanel display. percy: rewrite percy call to explicitly set viewport width to trigger mobile width correctly.

* cypress: overwrite percySnapshot to explicitly set viewport sizes for desktop and mobile

cypress/support/commands.js

@@ -23,6 +23,7 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+import '@percy/cypress'
 import '@testing-library/cypress/add-commands'
 import 'cypress-react-router/add-commands'
 
@@ -41,3 +42,14 @@ Cypress.Commands.add('iframe', {prevSubject: 'element'}, ($iframe, callback = ()
       .within({}, callback)
 })
 
+
+Cypress.Commands.overwrite('percySnapshot', (label) => {
+  const mobileWidth = 390
+  const mobileHeight = 844
+  const desktopWidth = 1280
+  const desktopHeight = 1024
+  return cy.viewport(mobileWidth, mobileHeight)
+    .percySnapshot(label, {width: mobileWidth})
+    .viewport(desktopWidth, desktopHeight)
+    .percySnapshot({width: 1280})
+})

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.1182",
+  "version": "1.0.1186",
   "main": "src/index.jsx",
   "license": "AGPL-3.0",
   "homepage": "https://github.com/bldrs-ai/Share",

src/Components/Versions/VersionsControl.jsx

@@ -1,8 +1,8 @@
 import React, {ReactElement} from 'react'
 import useStore from '../../store/useStore'
 import {ControlButtonWithHashState} from '../Buttons'
+import {VERSIONS_TITLE} from './component'
 import {HASH_PREFIX_VERSIONS} from './hashState'
-import {TITLE} from './VersionsPanel'
 import HistoryIcon from '@mui/icons-material/History'
 
 
@@ -16,7 +16,7 @@ export default function VersionsControl() {
   const setIsVersionsVisible = useStore((state) => state.setIsVersionsVisible)
   return (
     <ControlButtonWithHashState
-      title={TITLE}
+      title={VERSIONS_TITLE}
       icon={<HistoryIcon className='icon-share'/>}
       isDialogDisplayed={isVersionsVisible}
       setIsDialogDisplayed={setIsVersionsVisible}

src/Components/Versions/VersionsPanel.jsx

@@ -6,13 +6,11 @@ import {navigateBaseOnModelPath} from '../../utils/location'
 import {TooltipIconButton} from '../Buttons'
 import Panel from '../SideDrawer/Panel'
 import VersionsTimeline from './VersionsTimeline'
+import {VERSIONS_TITLE} from './component'
 import useVersions from './useVersions'
 import RestartAltIcon from '@mui/icons-material/RestartAlt'
 
 
-export const TITLE = 'Versions'
-
-
 /**
  * VersionsPanel displays a series of versions in a timeline format.
  * Each version corresponds to a commit, and this component fetches
@@ -57,9 +55,10 @@ export default function VersionsPanel({filePath, currentRef}) {
     }
   }
 
+
   return (
     <Panel
-      title={TITLE}
+      title={VERSIONS_TITLE}
       actions={
         <TooltipIconButton
           title='Refresh'

src/Components/Versions/VersionsPanel.test.jsx

@@ -2,11 +2,12 @@ import React from 'react'
 import {act, render, renderHook, waitFor} from '@testing-library/react'
 import {StoreRouteThemeCtx} from '../../Share.fixture'
 import useStore from '../../store/useStore'
-import VersionsPanel, {TITLE} from './VersionsPanel'
+import VersionsPanel from './VersionsPanel'
 import {
   MOCK_MODEL_PATH_GIT,
   MOCK_REPOSITORY,
 } from './VersionsPanel.fixture'
+import {VERSIONS_TITLE} from './component'
 import useVersions from './useVersions'
 import {MOCK_COMMITS} from './VersionsTimeline.fixture'
 
@@ -58,7 +59,7 @@ describe('VersionsPanel', () => {
 
     // Wait for the updated state to be rendered
     await waitFor(() => {
-      expect(getByText(TITLE)).toBeInTheDocument()
+      expect(getByText(VERSIONS_TITLE)).toBeInTheDocument()
     })
     MOCK_COMMITS.forEach((commit) => {
       expect(getByText(commit.authorName)).toBeInTheDocument()

src/Components/Versions/component.js

@@ -0,0 +1 @@
+export const VERSIONS_TITLE = 'Versions'

src/Containers/TabbedPanels.jsx

@@ -40,7 +40,7 @@ export default function TabbedPanels({
   const isPropertiesVisible = useStore((state) => state.isPropertiesVisible)
   const setIsPropertiesVisible = useStore((state) => state.setIsPropertiesVisible)
 
-  const isVersionsEnabled = useStore((state) => state.isVerisonsEnabled)
+  const isVersionsEnabled = useStore((state) => state.isVersionsEnabled)
   const isVersionsVisible = useStore((state) => state.isVersionsVisible)
   const setIsVersionsVisible = useStore((state) => state.setIsVersionsVisible)
 

src/Share.jsx

@@ -27,6 +27,7 @@ export default function Share({installPrefix, appPrefix, pathPrefix}) {
   const modelPath = useStore((state) => state.modelPath)
   const searchIndex = useStore((state) => state.searchIndex)
   const setModelPath = useStore((state) => state.setModelPath)
+  const setIsVersionsEnabled = useStore((state) => state.setIsVersionsEnabled)
   const repository = useStore((state) => state.repository)
   const setRepository = useStore((state) => state.setRepository)
 
@@ -67,13 +68,15 @@ export default function Share({installPrefix, appPrefix, pathPrefix}) {
     const {org, repo} = urlParams
     if (org && repo) {
       setRepository(org, repo)
+      setIsVersionsEnabled(true)
     } else if (pathPrefix.startsWith('/share/v/p')) {
       debug().log('Setting default repo pablo-mayrgundter/Share')
       setRepository('pablo-mayrgundter', 'Share')
     } else {
       debug().warn('No repository set for project!, ', pathPrefix)
     }
-  }, [appPrefix, installPrefix, modelPath, pathPrefix, setRepository, urlParams, setModelPath, navigate])
+  }, [appPrefix, installPrefix, modelPath, navigate, pathPrefix,
+      setIsVersionsEnabled, setModelPath, setRepository, urlParams])
 
 
   // https://mui.com/material-ui/customization/how-to-customize/#4-global-css-override

src/store/VersionsSlice.js

@@ -10,14 +10,14 @@ import {isVisibleInitially} from '../Components/Versions/hashState'
  */
 export default function createVersionsSlice(set, get) {
   return {
-    isVersionsEnabled: true,
-    setIsVersionsEnabled: (isEnabled) => set(() => ({isVersionsEnabled: isEnabled})),
+    isVersionsEnabled: false,
+    setIsVersionsEnabled: (is) => set(() => ({isVersionsEnabled: is})),
 
     activeVersion: 0,
     setActiveVersion: (version) => set(() => ({activeVersion: version})),
 
     isVersionsVisible: isVisibleInitially(),
-    setIsVersionsVisible: (isVisible) => set(() => ({isVersionsVisible: isVisible})),
+    setIsVersionsVisible: (is) => set(() => ({isVersionsVisible: is})),
     toggleIsVersionsVisible: () =>
       set((state) => ({isVersionsVisible: !state.isVersionsVisible})),