Open GitHub link valid link doesnt activate open button

cypress/e2e/open/100/open-project-from-gh-link.cy.js

@@ -13,23 +13,35 @@ import {
 /** {@link https://github.com/bldrs-ai/Share/issues/765} */
 describe('Open 100: Open Project From GitHub Link', () => {
   beforeEach(homepageSetup)
-  context('Returning user visits homepage, enters Model URL into search', () => {
+  context('Returning user visits homepage, and uses URL to open a model', () => {
     const interceptTag = 'ghModelLoad'
     beforeEach(() => {
       setIsReturningUser()
       visitHomepageWaitForModel()
-      cy.get('[data-testid="control-button-search"]').click()
       setupVirtualPathIntercept(
         '/share/v/gh/Swiss-Property-AG/Momentum-Public/main/Momentum.ifc',
         '/Momentum.ifc',
         interceptTag,
       )
+    })
+
+    it('Activates a search bar by clicking on the search control button, enters Model URL into search - Model loads - Screen', () => {
+      cy.get('[data-testid="control-button-search"]').click()
       // Note this includes {enter} at end to simulate Enter keypress
       cy.get('[data-testid="textfield-search-query"]')
-        .type('https://github.com/Swiss-Property-AG/Momentum-Public/blob/main/Momentum.ifc{enter}')
+      .type('https://github.com/Swiss-Property-AG/Momentum-Public/blob/main/Momentum.ifc{enter}')
+      waitForModelReady(interceptTag)
+      cy.percySnapshot()
     })
 
-    it('Model loads - Screen', () => {
+    it(`Activates open dialog by clicking on the open control button,
+      activates Github tab,
+      enters Model URL into textbox and clicks activate button - Model loads - Screen`, () => {
+      cy.get('[data-testid="control-button-open"]').click()
+      cy.get('[data-testid="tab-github"]').click()
+      cy.get('[data-testid="textfield-search-query"]')
+      .type('https://github.com/Swiss-Property-AG/Momentum-Public/blob/main/Momentum.ifc')
+      cy.get('[data-testid="button-search-activate"]').click()
       waitForModelReady(interceptTag)
       cy.percySnapshot()
     })

cypress/e2e/search/100/elementName.cy.js

@@ -0,0 +1,34 @@
+import '@percy/cypress'
+import {
+  homepageSetup,
+  setIsReturningUser,
+  visitHomepageWaitForModel,
+} from '../../../support/utils'
+
+
+/** {@link https://github.com/bldrs-ai/Share/issues/1254} */
+describe('Search 100: Search model based on element name ', () => {
+  beforeEach(() => {
+    homepageSetup()
+    setIsReturningUser()
+  })
+
+  context('Returning user visits homepage', () => {
+    beforeEach(() => {
+      visitHomepageWaitForModel()
+      cy.get('[data-testid="control-button-search"]').click()
+    })
+
+    it(`Open Search > Enter "together" > Press Enter >
+       Search box with query visible, "Together" items highlighted in tree and scene - Screen`, () => {
+      cy.get('[data-testid="textfield-search-query"]').type('together{enter}')
+      cy.percySnapshot()
+    })
+    it(`Open Search > Enter "together" > Click Activate Button >
+      Search box with query visible, "Together" items highlighted in tree and scene - Screen`, () => {
+      cy.get('[data-testid="textfield-search-query"]').type('together')
+      cy.get('[data-testid="button-search-activate"]').click()
+      cy.percySnapshot()
+    })
+  })
+})

cypress/e2e/search/100/permalink.cy.js

@@ -3,7 +3,6 @@ import {waitForModelReady} from '../../../support/models'
 import {
   homepageSetup,
   setIsReturningUser,
-  visitHomepageWaitForModel,
 } from '../../../support/utils'
 
 
@@ -14,18 +13,6 @@ describe('Search 100: Permalink', () => {
     setIsReturningUser()
   })
 
-  context('Returning user visits homepage, Open Search > Enters "together"', () => {
-    beforeEach(() => {
-      visitHomepageWaitForModel()
-      cy.get('[data-testid="control-button-search"]').click()
-      cy.get('[data-testid="textfield-search-query"]').type('together{enter}')
-    })
-
-    it('Search box with query visible, "Together" items highlighted in tree and scene - Screen', () => {
-      cy.percySnapshot()
-    })
-  })
-
   context('Returning user visits permalink to "together" search', () => {
     beforeEach(() => {
       cy.visit('/share/v/p/index.ifc?q=together#n:;s:')

package.json

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

src/Components/Open/OpenModelDialog.jsx

@@ -79,8 +79,11 @@ export default function OpenModelDialog({
         { currentTab === 1 &&
           <>
             <>
-              <SearchBar placeholder='Model URL'
+              <SearchBar
+                placeholder='Model URL'
                 helperText='Paste GitHub file link to open the model'
+                cb={() => setIsDialogDisplayed(false)}
+                clearInput={true}
               />
             </>
             {isAuthenticated &&

src/Components/Search/SearchBar.jsx

@@ -7,7 +7,7 @@ import TextField from '@mui/material/TextField'
 import {looksLikeLink, githubUrlOrPathToSharePath} from '../../net/github/utils'
 import {handleBeforeUnload} from '../../utils/event'
 import {navWithSearchParamRemoved} from '../../utils/navigate'
-import CloseIcon from '@mui/icons-material/Close'
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
 
 
 /**
@@ -16,17 +16,18 @@ import CloseIcon from '@mui/icons-material/Close'
  *
  * @property {string} placeholder Text to display when search bar is inactive
  * @property {string} helperText Text to display under the TextField
+ * @property {Function} cb CallBack to be executed when the search is activated
+ * @property {boolean} clearInput Clear the search when the component is opened
  * @return {ReactElement}
  */
-export default function SearchBar({placeholder, helperText}) {
+export default function SearchBar({placeholder, helperText, cb = {}, clearInput = false}) {
   const location = useLocation()
   const navigate = useNavigate()
   const [searchParams, setSearchParams] = useSearchParams()
   const [inputText, setInputText] = useState('')
   const [error, setError] = useState('')
   const searchInputRef = useRef(null)
 
-
   useEffect(() => {
     if (location.search) {
       if (validSearchQuery(searchParams)) {
@@ -45,6 +46,12 @@ export default function SearchBar({placeholder, helperText}) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchParams])
 
+  useEffect(() => {
+    if (clearInput === true) {
+      setInputText('')
+      navWithSearchParamRemoved(navigate, location.pathname, QUERY_PARAM)
+    }
+  }, [navigate, location.pathname, clearInput])
 
   const onSubmit = (event) => {
     // Prevent form event bubbling and causing page reload.
@@ -59,6 +66,7 @@ export default function SearchBar({placeholder, helperText}) {
         const modelPath = githubUrlOrPathToSharePath(inputText)
         window.removeEventListener('beforeunload', handleBeforeUnload)
         navigate(modelPath, {replace: true})
+        cb()
       } catch (e) {
         setError(`Please enter a valid url. Click on the LINK icon to learn more.`)
       }
@@ -99,7 +107,6 @@ export default function SearchBar({placeholder, helperText}) {
         value={inputText}
         onChange={(_, newValue) => setInputText(newValue || '')}
         onInputChange={(_, newInputValue) => setInputText(newInputValue || '')}
-        clearIcon={<CloseIcon className='icon-share'/>}
         inputValue={inputText}
         renderInput={(params) => (
           <TextField
@@ -121,10 +128,11 @@ export default function SearchBar({placeholder, helperText}) {
                 <InputAdornment position="end">
                   <IconButton
                     aria-label="clear search"
-                    onClick={() => setInputText('')}
+                    onClick={onSubmit}
+                    data-testid='button-search-activate'
                     sx={{height: '2em', width: '2em'}}
                   >
-                    <CloseIcon
+                    <ArrowForwardIcon
                       className="icon-share"
                       color='primary'
                       fontSize="small"

src/Components/Search/SearchBar.test.jsx

@@ -62,8 +62,8 @@ describe( 'SearchBar', () => {
   })
 
   it('SeachBar', () => {
-    // eslint-disable-next-line no-empty-function
-    render(<SearchBar onClickMenuCb={() => {}} isOpen={true} placeholder={'Search'}/>, {wrapper: RouteThemeCtx})
+    render(<SearchBar placeholder={'Search'}/>, {wrapper: RouteThemeCtx})
     expect(screen.getByPlaceholderText('Search')).toBeInTheDocument()
+    expect(screen.getByTestId('button-search-activate')).toBeInTheDocument()
   })
 })

src/Containers/ControlsGroupAndDrawer.jsx

@@ -82,7 +82,6 @@ export default function ControlsGroupAndDrawer({
         navigate={navigate}
         isRepoActive={modelPath.repo !== undefined}
       />
-
       <Box sx={{width: '100%'}}>
         {isSearchEnabled && isSearchBarVisible && <SearchBar placeholder='Search'/>}
         {isNavTreeEnabled &&