-
-
Notifications
You must be signed in to change notification settings - Fork 31
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Open 200 - Tabbed Open dialog (#1195)
- Loading branch information
1 parent
c68605d
commit 93dcb9a
Showing
35 changed files
with
528 additions
and
155 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import '@percy/cypress' | ||
| import { | ||
| auth0Login, | ||
| homepageSetup, | ||
| returningUserVisitsHomepageWaitForModel, | ||
| } from '../../../support/utils' | ||
| import { | ||
| setupVirtualPathIntercept, | ||
| waitForModelReady, | ||
| } from '../../../support/models' | ||
|
|
||
|
|
||
| /** {@link https://github.com/bldrs-ai/Share/issues/1159}*/ | ||
| describe('Open 100: Open model dialog', () => { | ||
| beforeEach(homepageSetup) | ||
| context('First time user visits homepage not logged in', () => { | ||
| beforeEach(() => { | ||
| returningUserVisitsHomepageWaitForModel() | ||
| cy.get('[data-testid="control-button-open"]').click() | ||
| }) | ||
|
|
||
| it('Sample tab to be selected and Momentum sample model chip to be visible', () => { | ||
| cy.get('[data-testid="tab-samples"]').click() | ||
| cy.get(':nth-child(1) > [data-testid="sample-model-chip"] > .MuiChip-label').contains('Momentum') | ||
| cy.percySnapshot() | ||
| }) | ||
| it('Open button is visible', () => { | ||
| cy.get('[data-testid="tab-local"]').click() | ||
| cy.get('[data-testid="button_open_file"]').contains('Browse files...') | ||
| cy.percySnapshot() | ||
| }) | ||
| }) | ||
| context('Returning user visits homepage logged in', () => { | ||
| beforeEach(() => { | ||
| returningUserVisitsHomepageWaitForModel() | ||
| setupVirtualPathIntercept( | ||
| '/share/v/gh/cypresstester/test-repo/main/window.ifc', | ||
| '/index.ifc', | ||
| interceptTag) | ||
| auth0Login() | ||
| cy.get('[data-testid="control-button-open"]').click() | ||
| }) | ||
| it('GitHub controls are visible', () => { | ||
| cy.get('[data-testid="tab-github"]').click() | ||
| cy.percySnapshot() | ||
| }) | ||
| const interceptTag = 'ghOpenModelLoad' | ||
| it('Choose the path to the model on GitHub -> model is loaded into the scene', () => { | ||
| cy.get('[data-testid="tab-github"]').click() | ||
| cy.findByText('Github').click() | ||
| cy.findByLabelText('Organization', {timeout: 5000}).click() | ||
| cy.contains('@cypresstester').click() | ||
| cy.findByLabelText('Repository', {timeout: 5000}).eq(0).click() | ||
| cy.contains('test-repo').click() | ||
| cy.findByLabelText('File', {timeout: 5000}).eq(0).click() | ||
| cy.contains('window.ifc').click() | ||
| cy.get('[data-testid="button-openfromgithub"]').click() | ||
| waitForModelReady(interceptTag) | ||
| cy.percySnapshot() | ||
| }) | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,164 @@ | ||
|
|
||
| import React, {ReactElement, useState} from 'react' | ||
| import Button from '@mui/material/Button' | ||
| import Stack from '@mui/material/Stack' | ||
| import Typography from '@mui/material/Typography' | ||
| import {navigateBaseOnModelPath} from '../../utils/location' | ||
| import {useAuth0} from '../../Auth0/Auth0Proxy' | ||
| import {pathSuffixSupported} from '../../Filetype' | ||
| import {getFilesAndFolders} from '../../net/github/Files' | ||
| import {getRepositories, getUserRepositories} from '../../net/github/Repositories' | ||
| import useStore from '../../store/useStore' | ||
| import Selector from './Selector' | ||
| import SelectorSeparator from './SelectorSeparator' | ||
|
|
||
|
|
||
| /** | ||
| * @property {Function} navigate Callback from CadView to change page url | ||
| * @property {Array<string>} orgNamesArr List of org names for the current user. | ||
| * @property {Function} setIsDialogDisplayed callback | ||
| * @return {ReactElement} | ||
| */ | ||
| export default function GitHubFileBrowser({ | ||
| navigate, | ||
| orgNamesArr, | ||
| setIsDialogDisplayed, | ||
| }) { | ||
| const [currentPath, setCurrentPath] = useState('') | ||
| const [foldersArr, setFoldersArr] = useState(['']) | ||
| const {user} = useAuth0() | ||
| const [selectedOrgName, setSelectedOrgName] = useState('') | ||
| const [selectedRepoName, setSelectedRepoName] = useState('') | ||
| const [selectedFolderName, setSelectedFolderName] = useState('') | ||
| const [selectedFileIndex, setSelectedFileIndex] = useState('') | ||
| const [repoNamesArr, setRepoNamesArr] = useState(['']) | ||
| const [filesArr, setFilesArr] = useState(['']) | ||
| const accessToken = useStore((state) => state.accessToken) | ||
| const orgNamesArrWithAt = orgNamesArr.map((orgName) => `@${orgName}`) | ||
| const orgName = orgNamesArr[selectedOrgName] | ||
| const repoName = repoNamesArr[selectedRepoName] | ||
| const fileName = filesArr[selectedFileIndex] | ||
|
|
||
| const selectOrg = async (org) => { | ||
| setSelectedOrgName(org) | ||
| let repos | ||
| if (orgNamesArr[org] === user.nickname) { | ||
| repos = await getUserRepositories(accessToken) | ||
| } else { | ||
| repos = await getRepositories(orgNamesArr[org], accessToken) | ||
| } | ||
| const repoNames = Object.keys(repos).map((key) => repos[key].name) | ||
| setRepoNamesArr(repoNames) | ||
| setCurrentPath('') | ||
| setFoldersArr(['']) | ||
| setSelectedFolderName('') | ||
| setSelectedFileIndex('') | ||
| setSelectedRepoName('') | ||
| } | ||
|
|
||
| const selectRepo = async (repo) => { | ||
| setSelectedRepoName(repo) | ||
| const owner = orgNamesArr[selectedOrgName] | ||
| const {files, directories} = await getFilesAndFolders(repoNamesArr[repo], owner, '/', accessToken) | ||
|
|
||
| const fileNames = files.map((file) => file.name) | ||
| const directoryNames = directories.map((directory) => directory.name) | ||
|
|
||
| setFilesArr(fileNames) | ||
| const foldersArrWithSeparator = [ | ||
| ...directoryNames, | ||
| ] | ||
| setFoldersArr([...foldersArrWithSeparator]) | ||
| setCurrentPath('') | ||
| setSelectedFolderName('') | ||
| setSelectedFileIndex('') | ||
| } | ||
|
|
||
| const selectFolder = async (folderIndex) => { | ||
| const owner = orgNamesArr[selectedOrgName] | ||
|
|
||
| // Get the selected folder name using the index | ||
| const selectedFolderName_ = foldersArr[folderIndex] | ||
|
|
||
| let newPath | ||
| if (selectedFolderName_ === '[Parent Directory]') { | ||
| // Move one directory up | ||
| const pathSegments = currentPath.split('/').filter(Boolean) | ||
| pathSegments.pop() | ||
| newPath = pathSegments.join('/') | ||
| } else { | ||
| // Navigate into a subfolder or stay at the root | ||
| newPath = selectedFolderName_ === '/' ? '' : `${currentPath}/${selectedFolderName_}`.replace('//', '/') | ||
| } | ||
|
|
||
| setSelectedFolderName('none') | ||
| setCurrentPath(newPath) | ||
|
|
||
| const {files, directories} = await getFilesAndFolders(repoName, owner, newPath, accessToken) | ||
| const fileNames = files.map((file) => file.name) | ||
| const directoryNames = directories.map((directory) => directory.name) | ||
|
|
||
| // Adjust navigation options based on the current level | ||
| const navigationOptions = newPath ? ['[Parent Directory]', ...directoryNames] : [...directoryNames] | ||
|
|
||
| setFilesArr(fileNames) | ||
| const foldersArrWithSeparator = [ | ||
| ...navigationOptions, // All the folders | ||
| ] | ||
| setFoldersArr(foldersArrWithSeparator) | ||
| } | ||
|
|
||
| const navigateToFile = () => { | ||
| if (pathSuffixSupported(fileName)) { | ||
| // TODO(oleg): https://github.com/bldrs-ai/Share/issues/1215 | ||
| navigate({pathname: navigateBaseOnModelPath(orgName, repoName, 'main', `${currentPath}/${fileName}`)}) | ||
| setIsDialogDisplayed(false) | ||
| } | ||
| } | ||
| return ( | ||
| <Stack data-testid={'stack_gitHub_access_controls'}> | ||
| <Stack> | ||
| <Typography variant='overline'> | ||
| Browse files on Github | ||
| </Typography> | ||
| <Selector | ||
| label='Organization' | ||
| list={orgNamesArrWithAt} | ||
| selected={selectedOrgName} | ||
| setSelected={selectOrg} | ||
| data-testid='openOrganization' | ||
| /> | ||
| <Selector | ||
| label='Repository' | ||
| list={repoNamesArr} | ||
| selected={selectedRepoName} | ||
| setSelected={selectRepo} | ||
| data-testid='openRepository' | ||
| /> | ||
| <SelectorSeparator | ||
| label={(currentPath === '') ? 'Folder' : | ||
| `Folder: ${currentPath}`} | ||
| list={foldersArr} | ||
| selected={selectedFolderName} | ||
| setSelected={selectFolder} | ||
| data-testid='saveFolder' | ||
| /> | ||
| <Selector | ||
| label='File' | ||
| list={filesArr} | ||
| selected={selectedFileIndex} | ||
| setSelected={setSelectedFileIndex} | ||
| data-testid='openFile' | ||
| /> | ||
| </Stack> | ||
| <Button | ||
| onClick={navigateToFile} | ||
| disabled={selectedFileIndex === ''} | ||
| variant='contained' | ||
| data-testid='button-openfromgithub' | ||
| > | ||
| Open from Github | ||
| </Button> | ||
| </Stack> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import React from 'react' | ||
| import {render, screen} from '@testing-library/react' | ||
| import GitHubFileBrowser from './GitHubFileBrowser' | ||
|
|
||
|
|
||
| describe('GitHubFileBrowser', () => { | ||
| const orgNamesArr = ['org1', 'org2'] | ||
| const user = {nickname: 'cypressTester'} | ||
| const navigate = jest.fn() | ||
|
|
||
| it('renders all the UI elements', () => { | ||
| render(<GitHubFileBrowser navigate={navigate} orgNamesArr={orgNamesArr} user={user}/>) | ||
| expect(screen.getByText(/Browse files on Github/i)).toBeInTheDocument() | ||
| expect(screen.getByLabelText(/Organization/i)).toBeInTheDocument() | ||
| expect(screen.getByLabelText(/Repository/i)).toBeInTheDocument() | ||
| expect(screen.getByLabelText(/Folder/i)).toBeInTheDocument() | ||
| expect(screen.getByLabelText(/File/i)).toBeInTheDocument() | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.