Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add StoredVars tab #220

Open
wants to merge 122 commits into
base: trunk
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
122 commits
Select commit Hold shift + click to select a range
7397715
add StoredVarList and enable console to change.
Jongkeun May 29, 2018
52f8bcb
add StoredVarList
Jongkeun May 29, 2018
5fcca39
add StoredVar row proto type
Jongkeun May 29, 2018
07329b0
make storedVar table
Jongkeun May 31, 2018
360e63e
change the edit button to ActionButton
Jongkeun May 31, 2018
20d66a5
add Edit Button
Jongkeun May 31, 2018
22bf8cb
add propTypes
Jongkeun May 31, 2018
7d5018c
add array key at consoleBox
Jongkeun May 31, 2018
ddbe71e
seperated the children column under the values
Jongkeun May 31, 2018
91dccdf
Merge branch 'master' into StoredVars
Jongkeun May 31, 2018
cfa2a65
make 'setStoredVar' enable
Jongkeun May 31, 2018
1bf9642
modify edit process
Jongkeun May 31, 2018
0a37fb7
Merge branch 'StoredVars' of https://github.com/Jongkeun/selenium-ide…
Jongkeun May 31, 2018
bcd0fac
remove index parameter and set default consle.tab
Jongkeun Jun 1, 2018
b8c9152
change the button name from 'Edit' to 'Delete'
Jongkeun Jun 1, 2018
c49ddb1
add delete icon
Jongkeun Jun 1, 2018
592edd7
apply delete button
Jongkeun Jun 1, 2018
5361e90
make deleteBtn show only when hover the row
Jongkeun Jun 1, 2018
97091de
add padding at the console bottom
Jongkeun Jun 1, 2018
a2ac3bb
delete classnames at row
Jongkeun Jun 1, 2018
f8bd438
add refesh Button
Jongkeun Jun 1, 2018
01ae49f
apply Refresh Button
Jongkeun Jun 1, 2018
99793d2
remove observer
Jongkeun Jun 1, 2018
2f1ffb8
add delete storedVar function
Jongkeun Jun 1, 2018
5b02588
add storedVar add function and UI
Jongkeun Jun 4, 2018
a039510
fixed multiline at ContentEditable component
Jongkeun Jun 4, 2018
80560e6
reorganize css of StoredValList
Jongkeun Jun 4, 2018
f22421f
modify indent
Jongkeun Jun 4, 2018
e7fbea7
modify css of StoredVar
Jongkeun Jun 5, 2018
22ceeb6
refresh when clicking the tab
Jongkeun Jun 5, 2018
215df3e
fixed css
Jongkeun Jun 5, 2018
4d8a91e
remove index parameter at tabChanged
Jongkeun Jun 5, 2018
5084b98
Merge branch 'master' into StoredVars
Jongkeun Jun 7, 2018
34ab9b5
remerge confilct
Jongkeun Jun 7, 2018
c83c71c
remove the buttonBox
Jongkeun Jun 7, 2018
9f5ecfe
change the tab name to Variables
Jongkeun Jun 7, 2018
e2f7f86
add the tab parameter at tabClick func
Jongkeun Jun 7, 2018
32fe96d
changed the state name from add to addingVariable
Jongkeun Jun 7, 2018
8cc2ab8
change the values to state
Jongkeun Jun 7, 2018
f1d4f7c
add semicolon and rename the css
Jongkeun Jun 7, 2018
b6e30ba
create new Varaibles store as Observable
Jongkeun Jun 8, 2018
b5857a8
yarn lint and remove the unnecessary code
Jongkeun Jun 8, 2018
053507d
add tooltip at clear button
Jongkeun Jun 8, 2018
382f301
Merge branch 'master' into StoredVars
Jongkeun Jun 8, 2018
6b8c95b
the part declared variables is moved to formatCommand
Jongkeun Jun 11, 2018
afd3f3a
remove unncessary refresh variable and file
Jongkeun Jun 13, 2018
2fbec41
add test case Variables.spec.js
Jongkeun Jun 14, 2018
2d3c2ff
remove refresh icon form the font and the ttf
Jongkeun Jun 14, 2018
6c77ea7
add a variable beforehand.
Jongkeun Jun 14, 2018
04d7c5e
fix spell
Jongkeun Jun 14, 2018
b5c03de
change clearVariable to afterEach
Jongkeun Jun 14, 2018
be6b8af
rename StoredVarList to VariableList
Jongkeun Jun 14, 2018
5c824ba
rename StoredVar to Variable
Jongkeun Jun 14, 2018
90ca479
remove index column at Variables
Jongkeun Jun 17, 2018
4c051e5
remove zebra the table
Jongkeun Jun 17, 2018
f1d44e5
Move the plus next to the clear button
Jongkeun Jun 18, 2018
8fc4eb0
Allow changing the variable name
Jongkeun Jun 18, 2018
124cf5b
add validation before the delete
Jongkeun Jun 18, 2018
14668c4
add sort of variables
Jongkeun Jun 18, 2018
dc383bb
Align everything to the left
Jongkeun Jun 18, 2018
8c8a1e2
modify mas-width
Jongkeun Jun 18, 2018
73af006
move test case directory
Jongkeun Jun 18, 2018
b8bf1be
fixed the path in the test case
Jongkeun Jun 18, 2018
fcb0695
fixed indent
Jongkeun Jun 18, 2018
f078116
remove border-radius
Jongkeun Jun 18, 2018
e4b61c3
temp commit to keep working at home
Jongkeun Jun 18, 2018
c1a3541
Merge branch 'master' into StoredVars
Jongkeun Jun 19, 2018
595ea29
move the addingVariable to component
Jongkeun Jun 19, 2018
63f2056
add isRunning computed
Jongkeun Jun 19, 2018
0479728
Don't let users edit anything unless they are on a breakpoint
Jongkeun Jun 19, 2018
ec2a3db
commit yarn.lock file
Jongkeun Jun 19, 2018
ff0bc3d
add the isAddingVariable state
Jongkeun Jun 19, 2018
fb8fac2
make Add Variable work properly
Jongkeun Jun 20, 2018
08703dc
set focus on the input when clicking add button
Jongkeun Jun 20, 2018
64ab9cc
if there is no input text, make the add variables component disappea…
Jongkeun Jun 20, 2018
cd0dd7d
remove padding and change font-size of deleteBtn
Jongkeun Jun 20, 2018
2c974a2
change the header css
Jongkeun Jun 20, 2018
6c157ad
prevent delete, add, clear while playing the script
Jongkeun Jun 20, 2018
cd30364
add validation when called onBlur
Jongkeun Jun 20, 2018
34c200a
add the edit function
Jongkeun Jun 20, 2018
3400bac
make the focus lost when typing a enter key
Jongkeun Jun 20, 2018
95eb981
remove title of variableList
Jongkeun Jun 24, 2018
0944601
Merge branch 'master' into StoredVars
Jongkeun Jun 25, 2018
90282de
add Variables at the tab on Console
Jongkeun Jun 25, 2018
d8f027c
modify css
Jongkeun Jun 25, 2018
e0b8b8a
remove column
Jongkeun Jun 25, 2018
364d03e
modify css of the Variables
Jongkeun Jun 26, 2018
fd9aa81
removed spell checking whenever fouse out
Jongkeun Jun 26, 2018
c338056
modify css of the Variables for the css name
Jongkeun Jun 26, 2018
ca3d734
removed div hell and changed to ul and li
Jongkeun Jun 26, 2018
31bd3ec
removed unnecessary css
Jongkeun Jun 26, 2018
e7463a2
add header on Variables
Jongkeun Jun 26, 2018
3e1487a
make a hover on header inoperatived
Jongkeun Jun 26, 2018
45c1f76
make header shown if there is stored variables
Jongkeun Jun 26, 2018
ee9d96b
validation check for restoreSize
Jongkeun Jun 26, 2018
bae774a
add variables tab on Console test case
Jongkeun Jun 26, 2018
91a3e05
remove ContentEditable
Jongkeun Jun 26, 2018
57c263a
add margin
Jongkeun Jun 26, 2018
a2aa1d7
set row color when hover
Jongkeun Jun 27, 2018
d4057ed
fixed the situation which it couldn't modify the value
Jongkeun Jun 27, 2018
e7afab8
make the background color to white when running the script
Jongkeun Jun 27, 2018
11a27c4
fixed the case which a clear log is not working
Jongkeun Jul 11, 2018
ac14f23
resolved a font conflict
Jongkeun Jul 11, 2018
9542ed2
replace the font.css to master's
Jongkeun Jul 11, 2018
3922396
Merge branch 'master' into StoredVars
Jongkeun Jul 11, 2018
219a869
keep the input background white when editing
Jongkeun Aug 6, 2018
27cb4d7
Keep an invisible border around the inputs at all time
Jongkeun Aug 6, 2018
f79aa49
change the padding
Jongkeun Aug 6, 2018
156e804
Add margin around the last input
Jongkeun Aug 6, 2018
6178d3c
fixed for eslint
Jongkeun Aug 7, 2018
5003d93
add getEntries computed function
Jongkeun Oct 12, 2018
cd88f7e
remove isStop at variables.
Jongkeun Oct 12, 2018
c3b7459
set the header to show up always.
Jongkeun Oct 12, 2018
58a139c
change state of VariableList to be similar to TestRow
Jongkeun Oct 15, 2018
8012491
change input to Input component.
Jongkeun Oct 15, 2018
43146ef
change the name isValidKey to validKey, and using only state on input…
Jongkeun Oct 15, 2018
5c90bb2
remove deleteBtn on pristin row
Jongkeun Oct 15, 2018
35fd7a3
Modify a case that is not deleted correctly when modifying a variable…
Jongkeun Oct 15, 2018
90e6cf4
change the key of Variable components
Jongkeun Oct 15, 2018
c1dce17
remove handlekeydown event and replaced to onSubmit event
Jongkeun Oct 16, 2018
9014d69
prevent deleting while running a script.
Jongkeun Oct 16, 2018
0fb9ed9
add propTypes and end line
Jongkeun Oct 16, 2018
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -49,4 +49,13 @@ describe("<Console />", () => {
const unreadLogNotification = container.querySelector(".log.unread");
expect(unreadLogNotification).toBeInTheDOM();
});
it("should display an unread log notification when viewing the variables tab)", async () => {
const { container } = renderIntoDocument(<Console />);
const variablesTab = container.querySelector(".variables");
fireEvent.click(variablesTab);
await waitForElement(() => container.querySelector(".value-list"));
Logger.log("blah");
const unreadLogNotification = container.querySelector(".log.unread");
expect(unreadLogNotification).toBeInTheDOM();
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import classNames from "classnames";
export default class ClearButton extends React.Component {
render() {
return (
<ActionButton data-tip="<p>Clear log</p>" {...this.props} className={classNames("si-clear", this.props.className)} />// eslint-disable-line react/prop-types
<ActionButton {...this.props} className={classNames("si-clear", this.props.className)} />// eslint-disable-line react/prop-types
);
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
// Licensed to the Software Freedom Conservancy (SFC) under one
// or more contributor license agreements. See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership. The SFC licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License. You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
// KIND, either express or implied. See the License for the
// specific language governing permissions and limitations
// under the License.

import React from "react";
import ActionButton from "../ActionButton";
import classNames from "classnames";

export default class DeleteButton extends React.Component {
render() {
return (
<ActionButton data-tip="<p>Delete</p>" {...this.props} className={classNames("si-delete", this.props.className)} />// eslint-disable-line react/prop-types
);
}
}
88 changes: 88 additions & 0 deletions packages/selenium-ide/src/neo/components/Variable/index.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
// Licensed to the Software Freedom Conservancy (SFC) under one
// or more contributor license agreements. See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership. The SFC licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License. You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
// KIND, either express or implied. See the License for the
// specific language governing permissions and limitations
// under the License.

import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
import { observer } from "mobx-react";
import DeleteButton from "../ActionButtons/Delete";
import Input from "../FormInput";
import "./style.css";

@observer
export default class Variable extends React.Component {
constructor(props){
super(props);
this.handleChanged = this.handleChanged.bind(this);
this.keyChanged = this.keyChanged.bind(this);
this.valueChanged = this.valueChanged.bind(this);
this.delete = this.delete.bind(this);
this.edit = this.edit.bind(this);
this.state = { key: this.props.keyVar || "", value: this.props.value || undefined };
}

handleChanged() {
this.edit();
}
delete() {
this.props.delete(this.props.keyVar);
}
edit(){
const validKey = this.state.key;
if (validKey && this.state.value != undefined) {
this.delete();
this.props.add(validKey, this.state.value);
}
}
keyChanged(key) {
this.setState({ key: key });
}
valueChanged(value) {
this.setState({ value: value });
}
render() {
return (
<li className="variable">
<Input
name={classNames("name", { "editable": !this.props.readOnly }, { "isAdding": this.props.isPristine })}
label=""
width={0}
disabled={this.props.readOnly ? true : false}
onChange={this.keyChanged}
value={this.state.key}
onBlur={this.handleChanged} />
<Input
name={classNames("value", { "editable": !this.props.readOnly }, { "isAdding": this.props.isPristine })}
label=""
width={0}
disabled={this.props.readOnly ? true : false}
onChange={this.valueChanged}
value={this.state.value || ""}
onBlur={this.handleChanged} />
{ this.props.isPristine ? null : <DeleteButton className="deleteBtn" data-place="left" onClick={this.delete} disabled={this.props.readOnly}/> }
</li>
);
}
static propTypes = {
keyVar: PropTypes.string,
value: PropTypes.string,
delete: PropTypes.func,
add: PropTypes.func,
isPristine: PropTypes.bool,
readOnly: PropTypes.bool
};
}
39 changes: 39 additions & 0 deletions packages/selenium-ide/src/neo/components/Variable/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
.variable {
font-size: 12px;
word-break: break-all;
display: flex;
}

.variable .form-input {
float: left;
width: 48%;
text-align: left;
border: 1px transparent solid;
}

.variable:not(.value-header):hover {
background-color: #f3f3f3;
}

.variable .deleteBtn {
width: 4%;
opacity: 0;
height: 100%;
}

.variable:hover .deleteBtn {
opacity: 1;
}

.variable .form-input input,
.variable .form-input input:disabled {
background-color: transparent;
border: 1px transparent solid;
margin: 0;
}

.variable .form-input input:focus {
border: 1px #4ea1ff solid;
outline: 0;
background-color: white;
}
81 changes: 81 additions & 0 deletions packages/selenium-ide/src/neo/components/VariableList/index.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
// Licensed to the Software Freedom Conservancy (SFC) under one
// or more contributor license agreements. See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership. The SFC licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License. You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
// KIND, either express or implied. See the License for the
// specific language governing permissions and limitations
// under the License.

import React from "react";
import PropTypes from "prop-types";
import Variable from "../Variable";
import { observer } from "mobx-react";
import "./style.css";

@observer
export default class VariableList extends React.Component {
constructor(props){
super(props);
this.deleteVariable = this.deleteVariable.bind(this);
this.addVariable = this.addVariable.bind(this);
this._OnSubmit = this._OnSubmit.bind(this);
}
deleteVariable(key){
this.props.variables.deleteVariable(key);
}
addVariable(key, value){
this.props.variables.addVariable(key, value);
}
_OnSubmit(e) {
e.preventDefault();
// This set focus at deleteBtn for calling onBlur event that is to save value.
e.target[e.target.length - 1].focus();
}
render() {
const variables = this.props.variables;
const pristineID = Math.random();
return (
<form onSubmit={this._OnSubmit}>
<ul className="value-list">
<li className="value-header variable">
<strong className="name">Name</strong>
<strong className="value">Value</strong>
<div className="deleteBtn"/>
</li>
{variables.getEntries.map((storedMap) => (
<Variable
key={storedMap}
keyVar={storedMap[0]}
value={storedMap[1]}
add={this.addVariable}
delete={this.deleteVariable}
readOnly={this.props.readOnly}
isPristine={false}
/>
)).concat(
<Variable
key={pristineID}
add={this.addVariable}
delete={this.deleteVariable}
isPristine={true}
readOnly={this.props.readOnly}
/>)}
<input tabIndex="-1" type="submit"/>
</ul>
</form>
);
}
static propTypes = {
variables: PropTypes.object,
readOnly: PropTypes.bool
};
}
28 changes: 28 additions & 0 deletions packages/selenium-ide/src/neo/components/VariableList/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
.value-list {
text-align: left;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
}

.variable .name,
.variable .value {
float: left;
padding: 4px 5px;
width: 48%;
text-align: left;
border: 1px transparent solid;
}

.value-list li:last-child {
margin-bottom: 3px;
}

.value-list input[type="submit"] {
position: absolute;
width: 0;
height: 0;
padding: 0;
border: none;
}
33 changes: 21 additions & 12 deletions packages/selenium-ide/src/neo/containers/Console/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,26 +17,27 @@

import React from "react";
import PropTypes from "prop-types";
import { observer } from "mobx-react";
import { observe } from "mobx";
import TabBar from "../../components/TabBar";
import LogList from "../../components/LogList";
import VariableList from "../../components/VariableList";
import ClearButton from "../../components/ActionButtons/Clear";
import { output } from "../../stores/view/Logs";
import PlaybackState from "../../stores/view/PlaybackState";
import PlaybackLogger from "../../side-effects/playback-logging";
import "./style.css";
import CommandReference from "../../components/CommandReference";
import variables from "../../stores/view/Variables";
import UiState from "../../stores/view/UiState";
import { observer } from "mobx-react";
import { observe } from "mobx";
import { Commands } from "../../models/Command";
import "./style.css";

@observer
export default class Console extends React.Component {
constructor(props) {
super(props);
this.state = {
tab: "Log",
logsUnread: false
};
this.state = { tab: "Log", logsUnread: false };
this.tabClicked = this.tabClicked.bind(this);
this.playbackLogger = new PlaybackLogger();
this.loggerDisposer = observe(output.logs, () => {
this.setState({ logsUnread: this.state.tab === "Log" ? false : true });
Expand All @@ -58,24 +59,32 @@ export default class Console extends React.Component {
logsUnread: tab === "Log" ? false : this.state.logsUnread
});
}
tabClicked(){
this.props.restoreSize();
//create different object which stores name and read status (e.g., unread boolean)
tabClicked(tab) {
this.setState({
tab
});
if(this.props.restoreSize) this.props.restoreSize();
}
scroll(to) {
this.viewport.scrollTo(0, to);
}
render() {
const command = UiState.selectedCommand ? Commands.list.get(UiState.selectedCommand.command) : undefined;
const tabs = [{ name: "Log", unread: this.state.logsUnread }, { name: "Reference", unread: false }];
const tabs = [{ name: "Log", unread: this.state.logsUnread }, { name: "Reference", unread: false }, { name: "Variables", unread: false }];
const readOnly = (PlaybackState.isPlaying && !PlaybackState.paused);
return (
<footer className="console" style={{
height: this.props.height ? `${this.props.height}px` : "initial"
}}>
<TabBar tabs={tabs} tabWidth={90} buttonsMargin={0} tabChanged={this.tabChangedHandler}>
<ClearButton onClick={output.clear} />
<TabBar tabs={tabs} tabWidth={90} buttonsMargin={0} tabChanged={this.tabChangedHandler} tabClicked={this.tabClicked}>
{this.state.tab === "Log" && <ClearButton data-tip="<p>Clear log</p>" onClick={output.clear} /> }
{this.state.tab === "Variables" && <ClearButton data-tip="<p>Clear Variable</p>" onClick={variables.clearVariables} disabled={readOnly}/> }
{this.state.tab === "Reference" && <ClearButton onClick={output.clear} /> }
</TabBar>
<div className="viewport" ref={this.setViewportRef}>
{this.state.tab === "Log" && <LogList output={output} scrollTo={this.scroll}/> }
{this.state.tab === "Variables" && <VariableList variables={variables} readOnly={readOnly}/> }
{this.state.tab === "Reference" && <CommandReference currentCommand={command}/> }
</div>
</footer>
Expand Down
6 changes: 5 additions & 1 deletion packages/selenium-ide/src/neo/stores/view/Variables.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
// specific language governing permissions and limitations
// under the License.

import { action, observable } from "mobx";
import { action, observable, computed } from "mobx";

class Variables {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks really good, let's test this.
Add a spec file here packages/selenium-ide/src/neo/__test__/stores/domain/view/Variables.spec.js.
Have a look here for ideas.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did.
Let me know if it has correction points.

@observable storedVars = new Map();
Expand All @@ -36,6 +36,10 @@ class Variables {
@action.bound clearVariables() {
this.storedVars.clear();
}

@computed get getEntries() {
return this.storedVars.entries().sort();
}
}

if (!window._variables) window._variables = new Variables();
Expand Down