Sample models (bldrs-ai#187)

* add sample models Dialog

* add sample model

* add description to the sample model dialog

* adjust shortcut models

* clean up

* clean up

* add test + style details

* clean up

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.0-r306",
+  "version": "1.0.0-r284",
   "main": "src/index.jsx",
   "homepage": "https://github.com/bldrs-ai/Share",
   "bugs": {

src/Components/OpenModelControl.jsx

@@ -1,7 +1,9 @@
 import React, {useState} from 'react'
 import {makeStyles} from '@mui/styles'
 import Dialog from './Dialog'
-import OpenIcon from '../assets/2D_Icons/Open.svg'
+import GitHubIcon from '../assets/2D_Icons/GitHub.svg'
+import OpenFolder from '../assets/2D_Icons/OpenFolder.svg'
+import ModelsIcon from '../assets/2D_Icons/Model.svg'
 import LocalFileOpen from '../assets/2D_Icons/LocalFileOpen.svg'
 import {ControlButton} from './Buttons'
 
@@ -17,7 +19,7 @@ export default function OpenModelControl({fileOpen}) {
       title='Open IFC'
       isDialogDisplayed={isDialogDisplayed}
       setIsDialogDisplayed={setIsDialogDisplayed}
-      icon={<OpenIcon/>}
+      icon={<OpenFolder/>}
       dialog={
         <OpenModelDialog
           fileOpen={fileOpen}
@@ -35,13 +37,13 @@ function OpenModelDialog({isDialogDisplayed, setIsDialogDisplayed, fileOpen}) {
   const classes = useStyles()
   return (
     <Dialog
-      icon={<OpenIcon/>}
+      icon={<ModelsIcon/>}
       headerText='Model Access'
       isDialogDisplayed={isDialogDisplayed}
       setIsDialogDisplayed={setIsDialogDisplayed}
       content={
         <div className={classes.content}>
-          <LocalFileOpen/>
+          <GitHubIcon style = {{width: '50px', height: '50px'}}/>
           <p className={classes.bullet}>
             To take advantage of all features of BLDRS, we recommend using GitHub for model hosting.
             <br/>
@@ -56,23 +58,23 @@ function OpenModelDialog({isDialogDisplayed, setIsDialogDisplayed, fileOpen}) {
             <br/>
 
           </p>
-          <LocalFileOpen/>
+          <LocalFileOpen style = {{width: '50px', height: '50px'}}/>
           <p className={classes.bullet}>
             <b>Models accessed from local drive cannot be saved or shared.</b>
             <br/>
-            <span
-              className = {classes.link}
-              role = 'button'
-              tabIndex={0}
-              onKeyPress = {()=>{
-                fileOpen()
-                setIsDialogDisplayed(false)
-              }}
-              onClick = {()=>{
-                fileOpen()
-                setIsDialogDisplayed(false)
-              }}> open</span>
           </p>
+          <span
+            className = {classes.link}
+            role = 'button'
+            tabIndex={0}
+            onKeyPress = {()=>{
+              fileOpen()
+              setIsDialogDisplayed(false)
+            }}
+            onClick = {()=>{
+              fileOpen()
+              setIsDialogDisplayed(false)
+            }}>OPEN</span>
         </div>
       }/>
   )
@@ -83,10 +85,11 @@ const useStyles = makeStyles({
   content: {
     width: '270px',
   },
-  bullet: {
-    textAlign: 'left',
+  snippet: {
+    textAlign: 'center',
   },
   link: {
+    fontWeight: 'bold',
     color: 'blue',
     borderBottom: '1px solid blue',
     cursor: 'pointer',

src/Components/SampleModelsControl.test.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import {render, screen, fireEvent} from '@testing-library/react'
+import SampleModelsControl from './SampleModelsControl'
+import {MockRoutes} from '../BaseRoutesMock.test'
+
+
+test('renders sample models control', async () => {
+  const rendered = render( <MockRoutes contentElt = {<SampleModelsControl/>} />)
+  const sampleModelsButton = screen.getByTitle('Sample Models')
+  fireEvent.mouseOver(sampleModelsButton)
+  fireEvent.click(sampleModelsButton)
+
+  const tooltip = await rendered.findByRole('tooltip')
+  const dialogText = await screen.findByText('wiki')
+
+  expect(sampleModelsButton).toBeInTheDocument()
+  expect(tooltip).toBeInTheDocument()
+  expect(dialogText).toBeVisible()
+})