Skip to content

Commit

Permalink
fix(dataprovidereditdialog): add test apply filter button
Browse files Browse the repository at this point in the history 
Apply Filter should not be triggered automatically. Added a "test apply filter" button.
Removed badge in DLTFilterAssistant for "apply filter" edit as well.
  • Loading branch information
@mbehr1
mbehr1 committed Jan 3, 2021
1 parent 638bf7f commit c409760
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 10 deletions.
23 changes: 17 additions & 6 deletions src/webview/src/components/dataProviderEditDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import { Button, DialogContent, DialogTitle, FormControl, IconButton, InputLabel, TextField, Typography } from '@material-ui/core';
import CloseIcon from '@material-ui/icons/Close';
import FilterListIcon from '@material-ui/icons/FilterList';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import RadioGroup from '@material-ui/core/RadioGroup';
Expand Down Expand Up @@ -48,11 +49,13 @@ export default function DataProviderEditDialog(props) {
// DLTFilterAssistantDialog handling
const [dltFilterAssistantOpen, setDltFilterAssistantOpen] = React.useState(false);

const previewApplyText = props.applyMode ? 'Press "Test apply filter" button to start...' : '';

// preview badge content
const [previewBadgeContent, setPreviewBadgeContent] = React.useState();
const [previewBadgeStatus, setPreviewBadgeStatus] = React.useState(0);
const [previewBadgeStatus, setPreviewBadgeStatus] = React.useState(props.applyMode ? 3 : 0);
const [previewBadgeError, setPreviewBadgeError] = React.useState('');
const [previewQueryResult, setPreviewQueryResult] = React.useState('');
const [previewQueryResult, setPreviewQueryResult] = React.useState(previewApplyText);

useEffect(() => {
console.log(`DLTFilterAssistant effect for badge processing called (badgeStatus=${previewBadgeStatus}, source=${JSON.stringify(dataSource)})`);
Expand Down Expand Up @@ -130,7 +133,7 @@ export default function DataProviderEditDialog(props) {
</InputLabel>
<Input id="dataSourceInput" inputComponent={OnBlurInputBase}
placeholder="e.g. 'https://api.github.com/repos/mbehr1/fishbone/issues'"
inputProps={{ value: dataSource, onChange: (event) => { setPreviewBadgeStatus(0); setDataSource(event.target.value); } }} />
inputProps={{ value: dataSource, onChange: (event) => { setPreviewQueryResult(previewApplyText); setPreviewBadgeStatus(props.applyMode ? 3 : 0); setDataSource(event.target.value); } }} />
</FormControl>
</Paper>}
{dataType === 'ext:dlt' && <Paper>
Expand All @@ -154,19 +157,20 @@ export default function DataProviderEditDialog(props) {
</InputLabel>
<Input id="dataSourceInput" inputComponent={OnBlurInputBase}
placeholder={props.applyMode ? "e.g. '/get/docs/0/filters?delete=(uriencode({...}))&add={...}'" : "e.g. '/get/docs/0/filters?query=...'"}
inputProps={{ value: dataSource?.startsWith('ext:mbehr1.dlt-logs') ? dataSource.slice(19) : dataSource, onChange: (event) => { setPreviewBadgeStatus(0); setDataSource('ext:mbehr1.dlt-logs' + event.target.value); } }} />
inputProps={{ value: dataSource?.startsWith('ext:mbehr1.dlt-logs') ? dataSource.slice(19) : dataSource, onChange: (event) => { setPreviewQueryResult(previewApplyText); setPreviewBadgeStatus(props.applyMode ? 3 : 0); setDataSource('ext:mbehr1.dlt-logs' + event.target.value); } }} />
</FormControl>
</Paper>}
{!props.applyMode && <Paper>
<FormControl variant='outlined' fullWidth margin="normal">
<InputLabel shrink htmlFor="dataJsonPathInput">Enter jsonPath expression to extract results</InputLabel>
<Input id="dataJsonPathInput" inputComponent={OnBlurInputBase}
placeholder="e.g. '$.state' or '$.data[*]"
inputProps={{ value: dataJsonPath, onChange: (event) => { setPreviewBadgeStatus(0); setDataJsonPath(event.target.value); } }}
inputProps={{ value: dataJsonPath, onChange: (event) => { setPreviewQueryResult(previewApplyText); setPreviewBadgeStatus(props.applyMode ? 3 : 0); setDataJsonPath(event.target.value); } }}
/>
</FormControl>
<RadioGroup row value={dataConv?.split(':')[0]} onChange={(event) => {
setPreviewBadgeStatus(0);
setPreviewQueryResult(previewApplyText);
setPreviewBadgeStatus(props.applyMode ? 3 : 0);
switch (event.target.value) {
case 'index': setDataConv('index:0'); break;
case 'length': setDataConv('length:'); break;
Expand All @@ -185,6 +189,13 @@ export default function DataProviderEditDialog(props) {
}
</Paper>}
</Grid>
{props.applyMode && <Grid item>
<Button id={'dp-test-apply-filter-' + props.name} color="primary" startIcon={<FilterListIcon />}
disabled={!(previewBadgeStatus === 3 && dataSource?.length > 0)}
onClick={(e) => { if (previewBadgeStatus === 3 && dataSource?.length > 0) { setPreviewBadgeStatus(0); } }}>
Test "apply filter"
</Button>
</Grid>}
<Grid item>
<Paper>
{!props.applyMode && <Badge badgeContent={previewBadgeContent} color="error" anchorOrigin={{ vertical: 'top', horizontal: 'left', }} overlap="circle" max={999}>
Expand Down
17 changes: 13 additions & 4 deletions src/webview/src/components/dltFilterAssistant.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import FilterListIcon from '@material-ui/icons/FilterList';
import Checkbox from '@material-ui/core/Checkbox';
import Badge from '@material-ui/core/Badge';
import { makeStyles } from '@material-ui/styles';
Expand Down Expand Up @@ -273,7 +274,8 @@ export default function DLTFilterAssistantDialog(props) {
const newDataSource = uri + `?${commands}`;
if (newDataSource !== dataSource) {
setDataSource(newDataSource);
setPreviewBadgeStatus(0);
setPreviewQueryResult(`Press "Test apply filter" button to start...`);
setPreviewBadgeStatus(3);
}
} else { // !applyMode -> queryMode
// calc params newly based on left ones:
Expand All @@ -291,7 +293,7 @@ export default function DLTFilterAssistantDialog(props) {

// preview badge content
const [previewBadgeContent, setPreviewBadgeContent] = React.useState();
const [previewBadgeStatus, setPreviewBadgeStatus] = React.useState(0);
const [previewBadgeStatus, setPreviewBadgeStatus] = React.useState(props.applyMode ? 3 : 0); // 0 = please load, 1 = loading, 2 = done, 3 = wait manual
const [previewBadgeError, setPreviewBadgeError] = React.useState('');
const [previewQueryResult, setPreviewQueryResult] = React.useState('');

Expand Down Expand Up @@ -424,14 +426,21 @@ export default function DLTFilterAssistantDialog(props) {
</Grid>
</Grid>
</Grid>
{props.applyMode && <Grid item>
<Button id={'test-apply-filter-' + props.name} color="primary" startIcon={<FilterListIcon />}
disabled={!(previewBadgeStatus === 3 && dataSource?.length > 0)}
onClick={(e) => { if (previewBadgeStatus === 3 && dataSource?.length > 0) { setPreviewBadgeStatus(0); } }}>
Test "apply filter"
</Button>
</Grid>}
<Grid item>
source:<React.Fragment>{dataSource ? dataSource.split('&').map((fra, index) => <React.Fragment><br />{index > 0 ? <React.Fragment>&emsp;</React.Fragment> : null}{index > 0 ? '&' + decodeURIComponent(fra) : decodeURIComponent(fra)}</React.Fragment>) : ''}</React.Fragment>
</Grid>
<Grid item>
<Paper>
<Badge badgeContent={previewBadgeContent} color="error" anchorOrigin={{ vertical: 'top', horizontal: 'left', }} overlap="circle" max={999}>
{!props.applyMode && <Badge badgeContent={previewBadgeContent} color="error" anchorOrigin={{ vertical: 'top', horizontal: 'left', }} overlap="circle" max={999}>
badge content='{JSON.stringify(previewBadgeContent)}'
</Badge>
</Badge>}
<div>
badge error='{JSON.stringify(previewBadgeError)}'
badge status='{JSON.stringify(previewBadgeStatus)}'
Expand Down

0 comments on commit c409760

Please sign in to comment.