Skip to content

Commit

Permalink
Fixed vulnerability issues. Implemented first steps of Continuous int…
Browse files Browse the repository at this point in the history 
…egration. Implemented Binding testing.
  • Loading branch information
@danibanezRepos
danibanezRepos committed Dec 7, 2023
1 parent 5c39045 commit 2a2aac2
Show file tree
Hide file tree
Showing 8 changed files with 6,703 additions and 6,192 deletions.
24 changes: 24 additions & 0 deletions .github/workflows/ci.yml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
name: Frontend CI

on:
push:
branches: [ dev ]
pull_request:
branches: [ main ]

jobs:
build:
runs-on: ubuntu-latest

steps:
- uses: actions/checkout@v2
- name: Use Node.js
uses: actions/setup-node@v1
with:
node-version: '14'
- name: Install dependencies
run: npm install
- name: Run tests
run: npm test
- name: Build
run: npm run build
12,440 changes: 6,326 additions & 6,114 deletions package-lock.json
View file

Large diffs are not rendered by default.

9 changes: 5 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@
"@mui/icons-material": "^5.11.16",
"@mui/material": "^5.12.0",
"@svgr/webpack": "^8.1.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.6.1",
"css-select": "^5.1.0",
Expand Down Expand Up @@ -62,7 +60,10 @@
"devDependencies": {
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@svgr/webpack": "^6.2.1",
"eslint-plugin-react-hooks": "^4.6.0"
"@testing-library/jest-dom": "^6.1.5",
"@testing-library/react": "^14.1.2",
"eslint-plugin-react-hooks": "^4.6.0",
"jest": "^29.7.0"
},
"overrides": {
"react-scripts": {
Expand All @@ -72,4 +73,4 @@
}
}
}
}
}
156 changes: 83 additions & 73 deletions src/components/BindingsModal/bindingsModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ function BindingsModal({ allNodes, bindings, isBindingsOpen, setBindingsOpen, se
const [viewportWidth, setViewportWidth] = useState(window.innerWidth);

const operatorLists = useMemo(() => (['+', '-', '*', '/', '>', '<', '>=', '<=']), []);

// Gets all elements that could be useful for a binding definition, including other bindings
const getNumericProperties = useCallback(() => {
const nodeNumericValues = (allNodes ?? []).flatMap(node => {
Expand Down Expand Up @@ -254,7 +253,8 @@ function BindingsModal({ allNodes, bindings, isBindingsOpen, setBindingsOpen, se
] : [<option key="no-options" value="">{`No options available`}</option>];

return (
<div className={BindingModalStyles.bindingBuilder}>
<section aria-labelledby="binding-builder-title" className={BindingModalStyles.bindingBuilder}>
<h3 id="binding-builder-title" className="visually-hidden">Binding Builder</h3>
<div className={BindingModalStyles.fieldContainer} style={{ gridTemplateColumns: getGridTemplate(viewportWidth, showFirstCustomInput, showSecondCustomInput) }}>
<label className={BindingModalStyles.labelVarname}>Variable</label>
<span className={BindingModalStyles.inputWrapper}>
Expand All @@ -263,27 +263,31 @@ function BindingsModal({ allNodes, bindings, isBindingsOpen, setBindingsOpen, se
type="text"
value={bindingName}
disabled={!hasOptions}
onChange={e => setBindingName(e.target.value)} />
{error && <CloseIcon className={BindingModalStyles.errorIcon} />}
onChange={e => setBindingName(e.target.value)}
aria-label="Variable Input" />
{error && <CloseIcon aria-label="Input error" aria-live="polite" className={BindingModalStyles.errorIcon} />}
</span>
<label className={BindingModalStyles.labelEquals}>{viewportWidth <= 768 ? "=" : "equals"}</label>
{showFirstCustomInput && (
<input
type="number"
aria-label="First custom value"
value={firstCustomValue}
onChange={(e) => e.target.value ? setFirstCustomValue(parseInt(e.target.value, 10)) : setFirstCustomValue(0)}
className={BindingModalStyles.input}
/>
)}
<select
className={BindingModalStyles.input}
aria-label="First value"
value={showFirstCustomInput ? JSON.stringify({ custom: true }) : JSON.stringify(firstBuilderValue)}
onChange={(e) => handleOptionChange(e, setFirstBuilderValue, setFirstCustomInput)}
disabled={!hasOptions}>
{optionSet}
</select>
<select
title={getOperatorTooltip(operator)}
aria-label="Operator Selector"
className={BindingModalStyles.operatorSelector}
value={operator}
onChange={handleOperatorChange}
Expand All @@ -295,13 +299,15 @@ function BindingsModal({ allNodes, bindings, isBindingsOpen, setBindingsOpen, se
{showSecondCustomInput && (
<input
type="number"
aria-label="Second custom value"
value={secondCustomValue}
onChange={(e) => e.target.value ? setSecondCustomValue(parseInt(e.target.value, 10)) : setSecondCustomValue(0)}
className={BindingModalStyles.input}
/>
)}
<select
className={BindingModalStyles.input}
aria-label="Second value"
value={showSecondCustomInput ? JSON.stringify({ custom: true }) : JSON.stringify(secondBuilderValue)}
onChange={(e) => handleOptionChange(e, setSecondBuilderValue, setSecondCustomInput)}
disabled={!hasOptions}
Expand All @@ -313,24 +319,26 @@ function BindingsModal({ allNodes, bindings, isBindingsOpen, setBindingsOpen, se
<input
className={BindingModalStyles.checkbox}
type="checkbox"
aria-label="Show in Results"
style={{ display: 'inline-block' }}
checked={showInResults}
disabled={!hasOptions}
onChange={e => setShowInResults(e.target.checked)} />
<label className={BindingModalStyles.labelCheckbox}>Absolute</label>
<input
type="checkbox"
aria-label="Absolute"
style={{ display: 'inline-block' }}
checked={isAbsolute}
disabled={!hasOptions}
onChange={(e) => setIsAbsolute(e.target.checked)}
className={BindingModalStyles.checkbox}
/>
<button className={BindingModalStyles.addButton} onClick={() => addBinding()} disabled={!hasOptions}>
<button aria-label="Add Binding" className={BindingModalStyles.addButton} onClick={() => addBinding()} disabled={!hasOptions}>
{viewportWidth <= 768 ? <AddCircleOutlineIcon /> : "Add binding"}
</button>
</div>
</div>
</section>
);
}

Expand All @@ -340,92 +348,94 @@ function BindingsModal({ allNodes, bindings, isBindingsOpen, setBindingsOpen, se
...bindings.map(item => ({ ...item, source: 'bindings' })),
...tempBindings.map(item => ({ ...item, source: 'tempBindings' }))
];
return allBindings.map((binding, index) => (
<div
key={binding.id}
className={`${BindingModalStyles.bindingRow} ${activeBindings.includes(binding.id) ? BindingModalStyles.bindingRowActive : ''}`}
style={{ backgroundColor: binding.source === 'tempBindings' ? "#e9e9e9" : "white" }}>
<div className={BindingModalStyles.bindingName}>{binding.label}</div>
<div className={BindingModalStyles.bindingExpression}>
{binding.firstValue.label} {binding.operator} {binding.secondValue.label}
</div>
<label className={BindingModalStyles.labelCheckbox}>Show in results:</label>
<input
className={BindingModalStyles.checkbox}
type="checkbox"
style={{ display: 'inline-block' }}
checked={binding.showInResults}
onChange={() => {
const sourceList = binding.source === 'bindings' ? bindings : tempBindings;
const sourceIndex = sourceList.findIndex(item => item.id === binding.id);
const updatedBindings = [...sourceList];
updatedBindings[sourceIndex] = {
...updatedBindings[sourceIndex],
showInResults: !updatedBindings[sourceIndex].showInResults
};
if (binding.source === 'bindings')
setBindings(updatedBindings);
else
setTempBindings(updatedBindings);
}}
/>
<label className={BindingModalStyles.labelCheckbox}>Absolute</label>
<input
className={BindingModalStyles.checkbox}
type="checkbox"
style={{ display: 'inline-block' }}
checked={binding.isAbsolute}
onChange={() => {
const sourceList = binding.source === 'bindings' ? bindings : tempBindings;
const sourceIndex = sourceList.findIndex(item => item.id === binding.id);
const updatedBindings = [...sourceList];
updatedBindings[sourceIndex] = {
...updatedBindings[sourceIndex],
isAbsolute: !updatedBindings[sourceIndex].isAbsolute
};
if (binding.source === 'bindings')
setBindings(updatedBindings);
else
setTempBindings(updatedBindings);
}}
/>
<button className={BindingModalStyles.bindingRemove} onClick={() => handleRemoveVariable(binding.id, binding.source)}>
<DeleteIcon />
</button>
</div>
));
return (
<section aria-labelledby="defined-bindings-title">
<h3 id="defined-bindings-title" className="visually-hidden">Defined Bindings</h3>{
allBindings.map((binding, index) => (
<div
key={binding.id}
className={`${BindingModalStyles.bindingRow} ${activeBindings.includes(binding.id) ? BindingModalStyles.bindingRowActive : ''}`}
style={{ backgroundColor: binding.source === 'tempBindings' ? "#e9e9e9" : "white" }}>
<div className={BindingModalStyles.bindingName}>{binding.label}</div>
<div className={BindingModalStyles.bindingExpression}>
{binding.firstValue.label} {binding.operator} {binding.secondValue.label}
</div>
<label className={BindingModalStyles.labelCheckbox}>Show in results:</label>
<input
className={BindingModalStyles.checkbox}
type="checkbox"
style={{ display: 'inline-block' }}
checked={binding.showInResults}
onChange={() => {
const sourceList = binding.source === 'bindings' ? bindings : tempBindings;
const sourceIndex = sourceList.findIndex(item => item.id === binding.id);
const updatedBindings = [...sourceList];
updatedBindings[sourceIndex] = {
...updatedBindings[sourceIndex],
showInResults: !updatedBindings[sourceIndex].showInResults
};
if (binding.source === 'bindings')
setBindings(updatedBindings);
else
setTempBindings(updatedBindings);
}}
/>
<label className={BindingModalStyles.labelCheckbox}>Absolute</label>
<input
className={BindingModalStyles.checkbox}
type="checkbox"
style={{ display: 'inline-block' }}
checked={binding.isAbsolute}
onChange={() => {
const sourceList = binding.source === 'bindings' ? bindings : tempBindings;
const sourceIndex = sourceList.findIndex(item => item.id === binding.id);
const updatedBindings = [...sourceList];
updatedBindings[sourceIndex] = {
...updatedBindings[sourceIndex],
isAbsolute: !updatedBindings[sourceIndex].isAbsolute
};
if (binding.source === 'bindings')
setBindings(updatedBindings);
else
setTempBindings(updatedBindings);
}}
/>
<button
className={BindingModalStyles.bindingRemove}
onClick={() => handleRemoveVariable(binding.id, binding.source)}
aria-label={`Remove Binding ${binding.id}`}>
<DeleteIcon />
</button>
</div>
))}
</section>);
}

return (
<ModalWrapper isOpen={isBindingsOpen} closeModal={handleClose} maxWidth={1500}>
<ModalWrapper isOpen={isBindingsOpen} closeModal={handleClose} maxWidth={1500} aria-labelledby="modal-title">
<div className={BindingModalStyles.modalHeader}>
<h2 title={"Bindings and variables"}>Bindings and variables</h2>
<h2 id="modal-title">Bindings and Variables</h2>
</div>
<div className={`${BindingModalStyles.modalContent} ${showBindingBuilder ? BindingModalStyles.showBindingBuilder : ""}`}>
{renderBindings()}
{bindingBuilder()}
</div>
<button className={BindingModalStyles.closeBtn} onClick={handleClose}>
<button className={BindingModalStyles.closeBtn} onClick={handleClose} aria-label="Close">
<CloseIcon style={{ color: 'white', marginBottom: "-7px" }} />
</button>
<div className={BindingModalStyles.modalActions}>
<footer className={BindingModalStyles.modalActions}>
<div className={BindingModalStyles.actionsContainer}>
<button
className={BindingModalStyles.setBtn}
onClick={handleSubmit}>
<button className={BindingModalStyles.setBtn} onClick={handleSubmit} aria-label="Set Bindings">
Set bindings
</button>
<button
onClick={() => toggleBindingBuilderVisibility()}
className={BindingModalStyles.toggleButton}
>
<button onClick={toggleBindingBuilderVisibility} className={BindingModalStyles.toggleButton} aria-label="Toggle Binding Builder">
<ExpandMoreIcon style={{ transform: showBindingBuilder ? 'rotate(180deg)' : 'rotate(0)' }} />
</button>
<button className={BindingModalStyles.cancelBtn} onClick={handleClose}>
<button className={BindingModalStyles.cancelBtn} onClick={handleClose} aria-label="Cancel and Close">
Cancel
</button>
</div>
</div>
</footer>
</ModalWrapper>
);
}
Expand Down
Loading

0 comments on commit 2a2aac2

Please sign in to comment.