clean up

bldrs-ai · Mar 16, 2023 · 9b10f53 · 9b10f53
1 parent 3aeb5d4
commit 9b10f53
Show file tree

Hide file tree

Showing 19 changed files with 100 additions and 57 deletions.
diff --git a/src/Components/About/AboutControl.jsx b/src/Components/About/AboutControl.jsx
@@ -5,6 +5,7 @@ import {getCookieBoolean, setCookieBoolean} from '../../privacy/Privacy'
 import useStore from '../../store/useStore'
 import Dialog from '../Dialog'
 import {ControlButton} from '../Buttons'
+import {useIsMobile} from '../Hooks'
 import AboutDescription from './AboutDescription'
 import PrivacyControl from './PrivacyControl'
 import AboutIcon from '../../assets/icons/Information.svg'
@@ -25,14 +26,23 @@ export default function AboutControl() {
     name: 'isFirstTime',
     defaultValue: true,
   }))
+  const isMobile = useIsMobile()
+  const displayTooltip = () => isMobile ? turnOffIsTooltipsOpen() : toggleIsTooltipsOpen()
   const toggleIsTooltipsOpen = useStore((state) => state.toggleIsTooltipsOpen)
+  const turnOffIsTooltipsOpen = useStore((state) => state.turnOffIsTooltipsOpen)
   const setIsDialogDisplayedLocal = (value) => {
     setIsDialogDisplayed(value)
-    toggleIsTooltipsOpen()
+    displayTooltip()
   }
+  const setIsDialogDisplayedForDialog = () => {
+    setIsDialogDisplayed(false)
+    setCookieBoolean({component: 'about', name: 'isFirstTime', value: false})
+    displayTooltip()
+  }
+
   return (
     <ControlButton
-      title='About bldrs'
+      title='About'
       isDialogDisplayed={isDialogDisplayed}
       setIsDialogDisplayed={setIsDialogDisplayedLocal}
       icon={

diff --git a/src/Components/About/AboutControl.test.jsx b/src/Components/About/AboutControl.test.jsx
@@ -7,13 +7,13 @@ import AboutControl from './AboutControl'
 describe('About control tests', () => {
   test('renders the AboutControl button', () => {
     const {getByTitle} = render(<MockComponent><AboutControl/></MockComponent>)
-    const aboutControl = getByTitle('About bldrs')
+    const aboutControl = getByTitle('About')
     expect(aboutControl).toBeInTheDocument()
   })
 
-  test('renders AbotDialog when control is pressed', () => {
+  test('renders AboutDialog when control is pressed', () => {
     const {getByTitle, getByText} = render(<MockComponent><AboutControl/></MockComponent>)
-    const aboutControl = getByTitle('About bldrs')
+    const aboutControl = getByTitle('About')
     fireEvent.click(aboutControl)
     const dialogTitle = getByText('build every thing together')
     expect(dialogTitle).toBeInTheDocument()

diff --git a/src/Components/About/AboutDescription.jsx b/src/Components/About/AboutDescription.jsx
@@ -26,11 +26,11 @@ export default function AboutDescription({setIsDialogDisplayed}) {
         height: '160px',
         fontSize: '.9em',
         fontWeight: 'bold',
-        borderRadius: '10px',
+        borderRadius: '3px',
         margin: '2em 0',
         padding: '.3em 1em .5em .5em',
         color: theme.palette.primary.contrastText,
-        backgroundColor: theme.palette.scene.background,
+        border: `1px solid ${theme.palette.primary.main}`,
         textAlign: 'left',
       }}
     >
@@ -40,10 +40,10 @@ export default function AboutDescription({setIsDialogDisplayed}) {
         }}
       >
         <Typography variant={'h5'}>
-          Cross-functional online collaboration unlocks team flow,
-          productivity and creativity.
-          Open workspaces, open standards and open source code is the most powerful way to work.
-          Cooperation is the unfair advantage.
+            Cross-functional online collaboration unlocks team flow,
+            productivity and creativity.
+            Open workspaces, open standards and open source code is the most powerful way to work.
+            Cooperation is the unfair advantage.
         </Typography>
         <Box
           sx={{
@@ -56,21 +56,21 @@ export default function AboutDescription({setIsDialogDisplayed}) {
           }}
         >
           <a
-            // eslint-disable-next-line max-len
-            href='https://bldrs.ai/share/v/p/index.ifc#c:-119.076,0.202,83.165,-44.967,19.4,-4.972::i:1506392033'
+            href='https://bldrs.ai/share/v/p/index.ifc#c:-113.444,0.464,81.43,-23.595,24.522,10.88::i:1493510953'
             onClick={onClickLink}
           >
-            <div style={{textDecoration: 'underline', marginLeft: '10px'}}>Guide</div>
+            <Typography sx={{textDecoration: 'underline', marginLeft: '10px'}}>Guide</Typography>
           </a>
           <a
             // eslint-disable-next-line max-len
             href='https://bldrs.ai/share/v/gh/OlegMoshkovich/Logo/main/IFC_STUDY.ifc#c:40.821,-10.247,39.647,5.918,-13.326,-13.866::i:1605443723'
             onClick={onClickLink}
           >
-            <div style={{textDecoration: 'underline', marginLeft: '10px'}}>Team</div>
+            <Typography sx={{textDecoration: 'underline', marginLeft: '10px'}}>Team</Typography>
           </a>
         </Box>
       </Box>
     </Box>
   )
 }
+
diff --git a/src/Components/BranchesControl.jsx b/src/Components/BranchesControl.jsx
@@ -116,7 +116,7 @@ export default function Branches() {
             }}
             onChange={(e) => handleSelect(e)}
             variant='outlined'
-            label='Git Branches / Project Versions'
+            label='Project Iterations'
             value={selected}
             select
             role="button"

diff --git a/src/Components/Buttons.jsx b/src/Components/Buttons.jsx
@@ -4,7 +4,6 @@ import ToggleButton from '@mui/material/ToggleButton'
 import Tooltip from '@mui/material/Tooltip'
 import {assertDefined} from '../utils/assert'
 import useStore from '../store/useStore'
-import {useIsMobile} from './Hooks'
 import CloseIcon from '../assets/icons/Close.svg'
 
 
@@ -16,7 +15,6 @@ import CloseIcon from '../assets/icons/Close.svg'
  * @property {boolean} [selected] Selected state.  Default: false
  * @property {string} [size] Size enum: 'small', 'medium' or 'large'.  Default: 'medium'
  * @property {string} dataTestId Internal attribute for component testing. Default: ''
- * @property {boolean} noInfo
  * @return {React.Component} React component
  */
 export function TooltipIconButton({
@@ -27,13 +25,12 @@ export function TooltipIconButton({
   selected = false,
   size = 'medium',
   dataTestId = '',
-  noInfo = false,
+  aboutInfo = true,
 }) {
   assertDefined(title, onClick, icon)
-  const isMobile = useIsMobile()
   const [openLocal, setOpenLocal] = React.useState(false)
   const isTooltipsOpen = useStore((state) => state.isTooltipsOpen)
-  const open = !noInfo ? isTooltipsOpen : false
+  const open = aboutInfo ? isTooltipsOpen : false
   const handleClose = () => {
     setOpenLocal(false)
   }
@@ -42,24 +39,20 @@ export function TooltipIconButton({
   }
   return (
     <>
-      {isMobile ?
-       <ToggleButton selected={selected} onClick={onClick} value={''} size={size}>
-         {icon}
-       </ToggleButton> :
-        <Tooltip
-          open={openLocal || open}
-          onClose={handleClose}
-          onOpen={handleOpen}
-          title={title}
-          describeChild
-          placement={placement}
-          data-testid={dataTestId}
-        >
-          <ToggleButton selected={selected} onClick={onClick} value={''} size={size}>
-            {icon}
-          </ToggleButton>
-        </Tooltip>
-      }
+      <Tooltip
+        open={openLocal || open}
+        onClose={handleClose}
+        onOpen={handleOpen}
+        title={title}
+        describeChild
+        placement={placement}
+        data-testid={dataTestId}
+        PopperProps={{style: {zIndex: 0}}}
+      >
+        <ToggleButton selected={selected} onClick={onClick} value={''} size={size}>
+          {icon}
+        </ToggleButton>
+      </Tooltip>
     </>
   )
 }
@@ -109,7 +102,7 @@ export function CloseButton({onClick}) {
       placement='bottom'
       icon={<CloseIcon style={{width: '15px', height: '15px'}}/>}
       size='medium'
-      noInfo={true}
+      aboutInfo={false}
     />
   )
 }

diff --git a/src/Components/Buttons.test.jsx b/src/Components/Buttons.test.jsx
@@ -1,7 +1,8 @@
 import React from 'react'
-import {fireEvent, render} from '@testing-library/react'
+import {fireEvent, render, renderHook, act} from '@testing-library/react'
 import {MockComponent} from '../__mocks__/MockComponent'
 import {TooltipIconButton} from './Buttons'
+import useStore from '../store/useStore'
 import QuestionIcon from '../assets/icons/Question.svg'
 
 
@@ -25,4 +26,20 @@ describe('<TooltipIconButton />', () => {
     const tooltip = await rendered.findByRole('tooltip')
     expect(tooltip).toBeInTheDocument()
   })
+  test('show tooltip when the help is activated', async () => {
+    const {result} = renderHook(() => useStore((state) => state))
+    await act(() => {
+      result.current.toggleIsTooltipsOpen()
+    })
+    const {getByText} = render(
+        <MockComponent>
+          <TooltipIconButton
+            title={'TestTooltip'}
+            // eslint-disable-next-line no-empty-function
+            onClick={() => {}}
+            icon={<QuestionIcon/>}
+          />
+        </MockComponent>)
+    expect(await getByText('TestTooltip')).toBeVisible()
+  })
 })
diff --git a/src/Components/Dialog.jsx b/src/Components/Dialog.jsx
@@ -42,6 +42,7 @@ export default function Dialog({
       onClose={close}
       sx={{
         textAlign: 'center',
+        zIndex: 1000,
       }}
       PaperProps={{variant: 'control'}}
     >

diff --git a/src/Components/Logo.jsx b/src/Components/Logo.jsx
@@ -43,7 +43,7 @@ export default function Logo({onClick}) {
         placement="right"
         icon={<LogoIcon/>}
         onClick={onClick}
-        noInfo={true}
+        aboutInfo={false}
       />
     </Box>
   )

diff --git a/src/Components/Notes/NoteCard.jsx b/src/Components/Notes/NoteCard.jsx
@@ -298,6 +298,7 @@ const CardFooter = ({
             placement='bottom'
             onClick={onClickCamera}
             icon={<CameraIcon/>}
+            aboutInfo={false}
           />}
         {selected &&
           <TooltipIconButton

diff --git a/src/Components/Notes/Notes.jsx b/src/Components/Notes/Notes.jsx
@@ -45,7 +45,7 @@ export default function Notes() {
         const fetchedNotes = []
         const issuesData = await getIssues(repository, accessToken)
         let issueIndex = 0
-        issuesData.data.slice(0).map((issue, index) => {
+        issuesData.data.slice(0).reverse().map((issue, index) => {
           if (issue.body === null) {
             debug().warn(`issue ${index} has no body: `, issue)
             return null

diff --git a/src/Components/OpenModelControl.jsx b/src/Components/OpenModelControl.jsx
@@ -37,10 +37,9 @@ export default function OpenModelControl({fileOpen}) {
           title={'Open IFC'}
           onClick={() => setIsDialogDisplayed(true)}
           icon={<OpenIcon/>}
-          placement={'top'}
+          placement={'right'}
           selected={isDialogDisplayed}
-          dataTestId='open-ifc'
-          noInfo={true}
+          dataTestId='open-ifc'ß
         />
       </Paper>
       {isDialogDisplayed &&

diff --git a/src/Components/OperationsGroup.jsx b/src/Components/OperationsGroup.jsx
@@ -5,6 +5,7 @@ import useTheme from '@mui/styles/useTheme'
 import useStore from '../store/useStore'
 import {assertDefined} from '../utils/assert'
 import {hexToRgba} from '../utils/color'
+import {useIsMobile} from './Hooks'
 import AboutControl from './About/AboutControl'
 import CameraControl from './CameraControl'
 import CutPlaneMenu from './CutPlaneMenu'
@@ -16,6 +17,7 @@ import ListIcon from '../assets/icons/List.svg'
 import MoonIcon from '../assets/icons/Moon.svg'
 import NotesIcon from '../assets/icons/Notes.svg'
 import SunIcon from '../assets/icons/Sun.svg'
+import QuestionIcon from '../assets/icons/Question.svg'
 
 
 /**
@@ -38,6 +40,13 @@ export default function OperationsGroup({deselectItems}) {
   const isCollaborationGroupVisible = useStore((state) => state.isCollaborationGroupVisible)
   const isModelInteractionGroupVisible = useStore((state) => state.isModelInteractionGroupVisible)
   const isSettingsVisible = useStore((state) => state.isSettingsVisible)
+  const toggleIsTooltipsOpen = useStore((state) => state.toggleIsTooltipsOpen)
+  const isTooltipsOpen = useStore((state) => state.isTooltipsOpen)
+  const turnOffIsTooltipsOpen = useStore((state) => state.turnOffIsTooltipsOpen)
+  const isMobile = useIsMobile()
+  const turnOffTooltips = () => {
+    return isMobile ? turnOffIsTooltipsOpen() : null
+  }
 
   const isSelected = () => {
     const ifSelected = (
@@ -104,11 +113,18 @@ export default function OperationsGroup({deselectItems}) {
            title='Notes'
            icon={<NotesIcon/>}
            selected={isNotesOn}
-           onClick={() => toggle('Notes')}
+           onClick={() => {
+             turnOffTooltips()
+             toggle('Notes')
+           }
+           }
          />
          <TooltipIconButton
            title='Properties'
-           onClick={() => toggle('Properties')}
+           onClick={() => {
+             turnOffTooltips()
+             toggle('Properties')
+           }}
            selected={isPropertiesOn}
            icon={<ListIcon/>}
          />
@@ -120,6 +136,7 @@ export default function OperationsGroup({deselectItems}) {
            selected={isSelected()}
            icon={<ClearIcon/>}
          />
+
        </ButtonGroup>
       }
 
@@ -130,6 +147,12 @@ export default function OperationsGroup({deselectItems}) {
            onClick={() => theme.toggleColorMode()}
            icon={theme.palette.mode === 'light' ? <MoonIcon/> : <SunIcon/>}
          />
+         <TooltipIconButton
+           title='Help'
+           onClick={() => toggleIsTooltipsOpen()}
+           selected={isTooltipsOpen}
+           icon={<QuestionIcon/>}
+         />
          <AboutControl/>
        </ButtonGroup>
       }

diff --git a/src/Components/SearchBar.jsx b/src/Components/SearchBar.jsx
@@ -120,13 +120,13 @@ export default function SearchBar({fileOpen}) {
           value={inputText}
           onChange={onInputChange}
           error={true}
-          placeholder={'Search / Insert GitHub link'}
+          placeholder={'Search'}
           sx={{
             ...theme.typography.tree,
             'marginTop': '4px',
-            'marginLeft': '8px',
+            'marginLeft': '14px',
             '& input::placeholder': {
-              opacity: .3,
+              opacity: .2,
             },
           }}
         />

diff --git a/src/Components/SearchBar.test.jsx b/src/Components/SearchBar.test.jsx
@@ -63,6 +63,6 @@ describe( 'SearchBar', () => {
   it('SeachBar', () => {
     // eslint-disable-next-line no-empty-function
     render(<ShareMock><SearchBar onClickMenuCb={() => {}} isOpen={true}/></ShareMock>)
-    expect(screen.getByPlaceholderText('Search / Insert GitHub link')).toBeInTheDocument()
+    expect(screen.getByPlaceholderText('Search')).toBeInTheDocument()
   })
 })
diff --git a/src/Containers/CadView.jsx b/src/Containers/CadView.jsx
@@ -644,7 +644,7 @@ function OperationsGroupAndDrawer({deselectItems}) {
         <Box
           sx={{
             position: 'absolute',
-            top: 0,
+            top: 3,
             right: 0,
           }}
         >

diff --git a/src/__mocks__/api-handlers.js b/src/__mocks__/api-handlers.js
@@ -123,7 +123,6 @@ export const handlers = [
 
   rest.patch('https://api.github.com/repos/:org/:repo/issues/:issueNumber', (req, res, ctx) => {
     const {org, repo} = req.params
-    console.log('in the patch mock')
     if (org !== 'pablo-mayrgundter' || repo !== 'Share' ) {
       console.log('in the if')
       return res(

diff --git a/src/assets/icons/Question.svg b/src/assets/icons/Question.svg