Skip to content

Commit

Permalink
fix: kurono ui update (#1745)
Browse files Browse the repository at this point in the history
* test PR

* move the Reset Code Button logic into IDEEditor

* fix: updated ui

* removing unused components

* removed resetCode that is unused

* remove editorActions

* fix IDEConsole snapshot

* fixing snapshots

* fixing snapshots IDEEditor

* fixing IDEEditor snapshot

* isCodeOnServerDifferent is false

* fix: all snapshots are updated

* updated text to not have titled cases

* lower case

* move clear console button to its own toolbar

* add props validation for ClearConsoleBar

* update prop name

* adjust editor height to fix zoom in/out problem

* update snapshots

* remove the alert as it will be replaced with a real function

* another snapshow update with removing pause onClick

* update background color for ClearConsoleBar

* fix comments for review

* update snapshot

* add test & update snapshots

* align closing tag

---------

Co-authored-by: Chi-En Wei <chi-en.wei@ocado.com>
  • Loading branch information
KamilPawel and cewei8483 committed Mar 16, 2023
1 parent 0179ad7 commit 536e78e
Show file tree
Hide file tree
Showing 22 changed files with 227 additions and 109 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -96,3 +96,4 @@ game_frontend/package-lock.json
# Cypress generated folders
game_frontend/cypress/screenshots
game_frontend/cypress/videos

Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<ClearConsoleBar /> renders correctly 1`] = `
<Styled(WithStyles(ForwardRef(Toolbar)))
variant="dense"
>
<styled.div>
<Styled(WithStyles(ForwardRef(Button)))
startIcon={<ClearIcon />}
>
Clear console
</Styled(WithStyles(ForwardRef(Button)))>
</styled.div>
</Styled(WithStyles(ForwardRef(Toolbar)))>
`;
41 changes: 41 additions & 0 deletions game_frontend/src/components/ClearConsoleBar/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { Button, Toolbar } from '@material-ui/core';
import ClearIcon from 'components/icons/Clear';
import React from 'react';
import styled from 'styled-components'
import PropTypes from 'prop-types'

export const StyledClearConsoleBar = styled(Toolbar)`
background: #2f3129;
display: flex;
flex-direction: row;
justify-content: flex-end;
`

export const StyledConsoleTitle = styled.div`
display: inline-flex;
`

export const ClearButton = styled(Button)`
right: 0vw;
`

const ClearConsoleBar = (props) => {
return (
<StyledClearConsoleBar variant="dense">
<StyledConsoleTitle>
<ClearButton
onClick={props.clearConsoleClicked}
startIcon={<ClearIcon />}
>
Clear console
</ClearButton>
</StyledConsoleTitle>
</StyledClearConsoleBar>
)
}

ClearConsoleBar.propTypes = {
clearConsoleClicked: PropTypes.func,
}

export default ClearConsoleBar;
12 changes: 12 additions & 0 deletions game_frontend/src/components/ClearConsoleBar/index.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
/* eslint-env jest */
import React from 'react'
import ClearConsoleBar from 'components/ClearConsoleBar'
import createShallowWithTheme from 'testHelpers/createShallow'

describe('<ClearConsoleBar />', () => {
it('renders correctly', () => {
const tree = createShallowWithTheme(<ClearConsoleBar />)

expect(tree).toMatchSnapshot()
})
})
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,9 @@ exports[`<ConsoleBar /> renders correctly 1`] = `
color="textSecondary"
variant="body1"
>
Console Log
Console log
</WithStyles(ForwardRef(Typography))>
</styled.div>
<WithStyles(ForwardRef(Button))
variant="outlined"
>
Reset code
</WithStyles(ForwardRef(Button))>
<WithStyles(ForwardRef(IconButton))
size="small"
>
<ClearIcon />
</WithStyles(ForwardRef(IconButton))>
</Styled(WithStyles(ForwardRef(Toolbar)))>
`;

Expand Down Expand Up @@ -244,7 +234,7 @@ exports[`<StyledConsoleBar /> renders correctly 1`] = `
"fontSize": "0.875rem",
"fontWeight": 500,
"lineHeight": 1.75,
"textTransform": "capitalize",
"textTransform": "none",
},
"caption": Object {
"fontFamily": "museo-sans,Source Code Pro",
Expand Down Expand Up @@ -540,7 +530,7 @@ exports[`<StyledConsoleIcon /> renders correctly 1`] = `
"fontSize": "0.875rem",
"fontWeight": 500,
"lineHeight": 1.75,
"textTransform": "capitalize",
"textTransform": "none",
},
"caption": Object {
"fontFamily": "museo-sans,Source Code Pro",
Expand Down
17 changes: 2 additions & 15 deletions game_frontend/src/components/ConsoleBar/index.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import styled from 'styled-components'
import Toolbar from '@material-ui/core/Toolbar/Toolbar'
import { Typography, IconButton, Button } from '@material-ui/core'
import { Typography } from '@material-ui/core'
import ConsoleIcon from 'components/icons/Console'
import ClearIcon from 'components/icons/Clear'
import React, { Component } from 'react'
import PropTypes from 'prop-types'

export const StyledConsoleBar = styled(Toolbar)`
background-color: ${(props) => props.theme.palette.grey.A700};
Expand All @@ -21,26 +19,15 @@ export const StyledConsoleIcon = styled(ConsoleIcon)`
`

export default class ConsoleBar extends Component {
static propTypes = {
clearConsoleClicked: PropTypes.func,
handleResetCodeClicked: PropTypes.func,
}

render() {
return (
<StyledConsoleBar variant="dense">
<StyledConsoleTitle>
<StyledConsoleIcon color="disabled" />
<Typography variant="body1" color="textSecondary">
Console Log
Console log
</Typography>
</StyledConsoleTitle>
<Button variant="outlined" onClick={this.props.handleResetCodeClicked}>
Reset code
</Button>
<IconButton size="small" onClick={this.props.clearConsoleClicked}>
<ClearIcon />
</IconButton>
</StyledConsoleBar>
)
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ exports[`<FindMeButton /> matches snapshot 1`] = `
<Styled(FindMeIcon)
color="inherit"
/>
Find Me
Find me
</WithStyles(ForwardRef(Fab))>
`;

Expand Down Expand Up @@ -223,7 +223,7 @@ exports[`<MarginedLocationIcon /> matches snapshot 1`] = `
"fontSize": "0.875rem",
"fontWeight": 500,
"lineHeight": 1.75,
"textTransform": "capitalize",
"textTransform": "none",
},
"caption": Object {
"fontFamily": "museo-sans,Source Code Pro",
Expand Down
2 changes: 1 addition & 1 deletion game_frontend/src/components/FindMeButton/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default class FindMeButton extends Component {
onClick={this.props.whenClicked}
>
<MarginedLocationIcon color="inherit" />
Find Me
Find me
</Fab>
)
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -324,7 +324,7 @@ exports[`<LoadingText /> matches snapshot 1`] = `
"fontSize": "0.875rem",
"fontWeight": 500,
"lineHeight": 1.75,
"textTransform": "capitalize",
"textTransform": "none",
},
"caption": Object {
"fontFamily": "museo-sans,Source Code Pro",
Expand Down Expand Up @@ -641,7 +641,7 @@ exports[`<PositionedFindMeButton/> matches snapshot 1`] = `
"fontSize": "0.875rem",
"fontWeight": 500,
"lineHeight": 1.75,
"textTransform": "capitalize",
"textTransform": "none",
},
"caption": Object {
"fontFamily": "museo-sans,Source Code Pro",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,7 @@ exports[`<IDE /> renders correctly 1`] = `
"fontSize": "0.875rem",
"fontWeight": 500,
"lineHeight": 1.75,
"textTransform": "capitalize",
"textTransform": "none",
},
"caption": Object {
"fontFamily": "museo-sans,Source Code Pro",
Expand Down Expand Up @@ -493,7 +493,7 @@ exports[`<IDE /> renders correctly 1`] = `
"fontSize": "0.875rem",
"fontWeight": 500,
"lineHeight": 1.75,
"textTransform": "capitalize",
"textTransform": "none",
},
"caption": Object {
"fontFamily": "museo-sans,Source Code Pro",
Expand Down
24 changes: 12 additions & 12 deletions game_frontend/src/components/IDE/index.js
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
import React, { Component } from 'react'
import React from 'react'
import IDEEditor from 'containers/IDEEditor'
import IDEConsole from 'containers/IDEConsole'
import { darkTheme } from 'theme'
import { MuiThemeProvider } from '@material-ui/core/styles'
import { ThemeProvider as StyledComponentsThemeProvider } from 'styled-components'

export default class IDE extends Component {
render() {
return (
<StyledComponentsThemeProvider theme={darkTheme}>
<MuiThemeProvider theme={darkTheme}>
<IDEEditor />
<IDEConsole />
</MuiThemeProvider>
</StyledComponentsThemeProvider>
)
}
const IDE = () => {
return (
<StyledComponentsThemeProvider theme={darkTheme}>
<MuiThemeProvider theme={darkTheme}>
<IDEEditor />
<IDEConsole />
</MuiThemeProvider>
</StyledComponentsThemeProvider>
)
}

export default IDE
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`<BottomSnapper /> renders correctly 1`] = `
.c0 {
overflow-anchor: auto;
height: 1px;
height: 0px;
}
<tr
Expand Down Expand Up @@ -220,7 +220,7 @@ exports[`<LogData /> renders correctly 1`] = `
"fontSize": "0.875rem",
"fontWeight": 500,
"lineHeight": 1.75,
"textTransform": "capitalize",
"textTransform": "none",
},
"caption": Object {
"fontFamily": "museo-sans,Source Code Pro",
Expand Down Expand Up @@ -322,7 +322,7 @@ Object {
"instances": Array [
.c0 {
overflow-anchor: auto;
height: 1px;
height: 0px;
}
<tr
Expand Down Expand Up @@ -602,7 +602,7 @@ exports[`<LogEntry /> renders correctly 1`] = `
"fontSize": "0.875rem",
"fontWeight": 500,
"lineHeight": 1.75,
"textTransform": "capitalize",
"textTransform": "none",
},
"caption": Object {
"fontFamily": "museo-sans,Source Code Pro",
Expand Down Expand Up @@ -903,7 +903,7 @@ exports[`<LogTurn /> renders correctly 1`] = `
"fontSize": "0.875rem",
"fontWeight": 500,
"lineHeight": 1.75,
"textTransform": "capitalize",
"textTransform": "none",
},
"caption": Object {
"fontFamily": "museo-sans,Source Code Pro",
Expand Down Expand Up @@ -1202,7 +1202,7 @@ exports[`<StyledTable /> renders correctly 1`] = `
"fontSize": "0.875rem",
"fontWeight": 500,
"lineHeight": 1.75,
"textTransform": "capitalize",
"textTransform": "none",
},
"caption": Object {
"fontFamily": "museo-sans,Source Code Pro",
Expand Down
2 changes: 1 addition & 1 deletion game_frontend/src/components/LogEntries/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export const LogTurn = styled(TableCell)`

export const BottomSnapper = styled.tr`
overflow-anchor: auto;
height: 1px;
height: 0px;
`

export const StyledTable = styled(Table)`
Expand Down
3 changes: 2 additions & 1 deletion game_frontend/src/components/NavigationBar/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { IconButton, Button } from '@material-ui/core'
import KuronoLogo from 'components/icons/KuronoLogo'
import BadgeModal, { getBadges } from 'components/Badge'
import { avatarWorkerActions } from 'features/AvatarWorker'
import ExitToAppIcon from '@material-ui/icons/ExitToApp';

export const NavigationBarLayout = styled.nav`
grid-area: navigation-bar;
Expand Down Expand Up @@ -97,7 +98,7 @@ export class NavigationBar extends Component {
renderButtonToolbar = () => {
return (
<Toolbar>
<Button href={urlForAimmoDashboard} variant="outlined">
<Button href={urlForAimmoDashboard} startIcon={<ExitToAppIcon />}>
Exit game
</Button>
</Toolbar>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,7 @@ exports[`<MarginedBugIcon /> matches snapshot 1`] = `
"fontSize": "0.875rem",
"fontWeight": 500,
"lineHeight": 1.75,
"textTransform": "capitalize",
"textTransform": "none",
},
"caption": Object {
"fontFamily": "museo-sans,Source Code Pro",
Expand Down Expand Up @@ -506,7 +506,7 @@ exports[`<MarginedCheckCircle /> matches snapshot 1`] = `
"fontSize": "0.875rem",
"fontWeight": 500,
"lineHeight": 1.75,
"textTransform": "capitalize",
"textTransform": "none",
},
"caption": Object {
"fontFamily": "museo-sans,Source Code Pro",
Expand Down Expand Up @@ -803,7 +803,7 @@ exports[`<MarginedCircularProgress /> matches snapshot 1`] = `
"fontSize": "0.875rem",
"fontWeight": 500,
"lineHeight": 1.75,
"textTransform": "capitalize",
"textTransform": "none",
},
"caption": Object {
"fontFamily": "museo-sans,Source Code Pro",
Expand Down Expand Up @@ -1100,7 +1100,7 @@ exports[`<MarginedPlayIcon /> matches snapshot 1`] = `
"fontSize": "0.875rem",
"fontWeight": 500,
"lineHeight": 1.75,
"textTransform": "capitalize",
"textTransform": "none",
},
"caption": Object {
"fontFamily": "museo-sans,Source Code Pro",
Expand Down Expand Up @@ -1198,7 +1198,7 @@ exports[`<RunCodeButton /> becomes disabled when code is the same as the server
variant="extended"
>
<Styled(PlayIcon) />
Run Code
Run code
</WithStyles(ForwardRef(Fab))>
`;

Expand All @@ -1212,7 +1212,7 @@ exports[`<RunCodeButton /> becomes enabled when code is different from the serve
variant="extended"
>
<Styled(PlayIcon) />
Run Code
Run code
</WithStyles(ForwardRef(Fab))>
`;

Expand Down Expand Up @@ -1240,7 +1240,7 @@ exports[`<RunCodeButton /> renders with a normal status 1`] = `
variant="extended"
>
<Styled(PlayIcon) />
Run Code
Run code
</WithStyles(ForwardRef(Fab))>
`;

Expand Down
Loading

0 comments on commit 536e78e

Please sign in to comment.