Fixed the following issues:

1. Feature test cases for the new query tool.
 2. Query tool panel rename is not persisting.
This commit is contained in:
Aditya Toshniwal
2022-05-12 18:29:09 +05:30
committed by Akshay Joshi
parent 31be1ae026
commit ca8e14455f
21 changed files with 424 additions and 414 deletions

View File

@@ -411,7 +411,7 @@ export default function Graphical({planData, ctx}) {
onNodeClick={onNodeClick}
/>
{Boolean(explainPlanDetails) &&
<Card className={classes.explainDetails}>
<Card className={classes.explainDetails} data-label="explain-details">
<CardHeader title={<Box display="flex">
{explainPlanTitle}
<Box marginLeft="auto">

View File

@@ -94,8 +94,9 @@ export const PrimaryButton = forwardRef((props, ref)=>{
allClassName.push(classes.xsButton);
}
noBorder && allClassName.push(classes.noBorder);
const dataLabel = typeof(children) == 'string' ? children : undefined;
return (
<Button ref={ref} size={size} className={clsx(allClassName)} {...otherProps} variant="contained" color="primary" >{children}</Button>
<Button ref={ref} size={size} className={clsx(allClassName)} data-label={dataLabel} {...otherProps} variant="contained" color="primary">{children}</Button>
);
});
PrimaryButton.displayName = 'PrimaryButton';
@@ -116,8 +117,9 @@ export const DefaultButton = forwardRef((props, ref)=>{
allClassName.push(classes.xsButton);
}
noBorder && allClassName.push(classes.noBorder);
const dataLabel = typeof(children) == 'string' ? children : undefined;
return (
<Button variant="outlined" color="default" ref={ref} size={size} className={clsx(allClassName)} {...otherProps} >{children}</Button>
<Button variant="outlined" color="default" ref={ref} size={size} className={clsx(allClassName)} data-label={dataLabel} {...otherProps}>{children}</Button>
);
});
DefaultButton.displayName = 'DefaultButton';
@@ -144,7 +146,7 @@ export const PgIconButton = forwardRef(({icon, title, shortcut, className, split
return (
<PrimaryButton ref={ref} style={style}
className={clsx(classes.iconButton, (splitButton ? classes.splitButton : ''), className)}
accessKey={accesskey} {...props}>
accessKey={accesskey} data-label={title || ''} {...props}>
{icon}
</PrimaryButton>
);
@@ -152,7 +154,7 @@ export const PgIconButton = forwardRef(({icon, title, shortcut, className, split
return (
<DefaultButton ref={ref} style={style}
className={clsx(classes.iconButton, classes.iconButtonDefault, (splitButton ? classes.splitButton : ''), className)}
accessKey={accesskey} {...props}>
accessKey={accesskey} data-label={title || ''} {...props}>
{icon}
</DefaultButton>
);
@@ -163,7 +165,7 @@ export const PgIconButton = forwardRef(({icon, title, shortcut, className, split
<Tooltip title={shortcutTitle || title || ''} aria-label={title || ''}>
<PrimaryButton ref={ref} style={style}
className={clsx(classes.iconButton, (splitButton ? classes.splitButton : ''), className)}
accessKey={accesskey} {...props}>
accessKey={accesskey} data-label={title || ''} {...props}>
{icon}
</PrimaryButton>
</Tooltip>
@@ -173,7 +175,7 @@ export const PgIconButton = forwardRef(({icon, title, shortcut, className, split
<Tooltip title={shortcutTitle || title || ''} aria-label={title || ''}>
<DefaultButton ref={ref} style={style}
className={clsx(classes.iconButton, classes.iconButtonDefault, (splitButton ? classes.splitButton : ''), className)}
accessKey={accesskey} {...props}>
accessKey={accesskey} data-label={title || ''} {...props}>
{icon}
</DefaultButton>
</Tooltip>

View File

@@ -24,47 +24,47 @@ ExternalIcon.propTypes = {
Icon: PropTypes.elementType.isRequired,
};
export const QueryToolIcon = ({style})=><ExternalIcon Icon={QueryToolSvg} style={{height: '1rem', ...style}} />;
export const QueryToolIcon = ({style})=><ExternalIcon Icon={QueryToolSvg} style={{height: '1rem', ...style}} data-label="QueryToolIcon" />;
QueryToolIcon.propTypes = {style: PropTypes.object};
export const ViewDataIcon = ({style})=><ExternalIcon Icon={ViewDataSvg} style={{height: '0.8rem', ...style}} />;
export const ViewDataIcon = ({style})=><ExternalIcon Icon={ViewDataSvg} style={{height: '0.8rem', ...style}} data-label="ViewDataIcon" />;
ViewDataIcon.propTypes = {style: PropTypes.object};
export const SaveDataIcon = ({style})=><ExternalIcon Icon={SaveDataSvg} style={{height: '1rem', ...style}} />;
export const SaveDataIcon = ({style})=><ExternalIcon Icon={SaveDataSvg} style={{height: '1rem', ...style}} data-label="SaveDataIcon" />;
SaveDataIcon.propTypes = {style: PropTypes.object};
export const PasteIcon = ({style})=><ExternalIcon Icon={PasteSvg} style={style} />;
export const PasteIcon = ({style})=><ExternalIcon Icon={PasteSvg} style={style} data-label="PasteIcon" />;
PasteIcon.propTypes = {style: PropTypes.object};
export const FilterIcon = ({style})=><ExternalIcon Icon={FilterSvg} style={style} />;
export const FilterIcon = ({style})=><ExternalIcon Icon={FilterSvg} style={style} data-label="FilterIcon" />;
FilterIcon.propTypes = {style: PropTypes.object};
export const CommitIcon = ({style})=><ExternalIcon Icon={CommitSvg} style={style} />;
export const CommitIcon = ({style})=><ExternalIcon Icon={CommitSvg} style={{height: '1.2rem', ...style}} data-label="CommitIcon" />;
CommitIcon.propTypes = {style: PropTypes.object};
export const RollbackIcon = ({style})=><ExternalIcon Icon={RollbackSvg} style={style} />;
export const RollbackIcon = ({style})=><ExternalIcon Icon={RollbackSvg} style={{height: '1.2rem', ...style}} data-label="RollbackIcon" />;
RollbackIcon.propTypes = {style: PropTypes.object};
export const ClearIcon = ({style})=><ExternalIcon Icon={ClearSvg} style={style} />;
export const ClearIcon = ({style})=><ExternalIcon Icon={ClearSvg} style={style} data-label="ClearIcon" />;
ClearIcon.propTypes = {style: PropTypes.object};
export const ConnectedIcon = ({style})=><ExternalIcon Icon={ConnectedSvg} style={{height: '1rem', ...style}} />;
export const ConnectedIcon = ({style})=><ExternalIcon Icon={ConnectedSvg} style={{height: '1rem', ...style}} data-label="ConnectedIcon" />;
ConnectedIcon.propTypes = {style: PropTypes.object};
export const DisonnectedIcon = ({style})=><ExternalIcon Icon={DisconnectedSvg} style={{height: '1rem', ...style}} />;
export const DisonnectedIcon = ({style})=><ExternalIcon Icon={DisconnectedSvg} style={{height: '1rem', ...style}} data-label="DisonnectedIcon" />;
DisonnectedIcon.propTypes = {style: PropTypes.object};
export const RegexIcon = ({style})=><ExternalIcon Icon={RegexSvg} style={style} />;
export const RegexIcon = ({style})=><ExternalIcon Icon={RegexSvg} style={style} data-label="RegexIcon" />;
RegexIcon.propTypes = {style: PropTypes.object};
export const FormatCaseIcon = ({style})=><ExternalIcon Icon={FormatCaseSvg} style={style} />;
export const FormatCaseIcon = ({style})=><ExternalIcon Icon={FormatCaseSvg} style={style} data-label="FormatCaseIcon" />;
FormatCaseIcon.propTypes = {style: PropTypes.object};
export const ExpandDialogIcon = ({style})=><ExternalIcon Icon={Expand} style={{height: '1.2rem', ...style}} />;QueryToolIcon.propTypes = {style: PropTypes.object};
export const ExpandDialogIcon = ({style})=><ExternalIcon Icon={Expand} style={{height: '1.2rem', ...style}} data-label="ExpandDialogIcon" />;
ExpandDialogIcon.propTypes = {style: PropTypes.object};
export const MinimizeDialogIcon = ({style})=><ExternalIcon Icon={Collapse} style={{height: '1.4rem', ...style}} />;
export const MinimizeDialogIcon = ({style})=><ExternalIcon Icon={Collapse} style={{height: '1.4rem', ...style}} data-label="MinimizeDialogIcon" />;
MinimizeDialogIcon.propTypes = {style: PropTypes.object};
export const AWSIcon = ({style})=><ExternalIcon Icon={AWS} style={{height: '1.4rem', ...style}} />;
export const AWSIcon = ({style})=><ExternalIcon Icon={AWS} style={{height: '1.4rem', ...style}} data-label="AWSIcon" />;
AWSIcon.propTypes = {style: PropTypes.object};

View File

@@ -40,13 +40,13 @@ const useStyles = makeStyles((theme)=>({
}
}));
export default function Loader({message, style}) {
export default function Loader({message, style, ...props}) {
const classes = useStyles();
if(!message) {
return <></>;
}
return (
<Box className={classes.root} style={style}>
<Box className={classes.root} style={style} data-label="loader" {...props}>
<Box className={classes.loaderRoot}>
<CircularProgress className={classes.loader} />
<Typography className={classes.message}>{message}</Typography>

View File

@@ -24,6 +24,7 @@ const useStyles = makeStyles((theme)=>({
},
'& .szh-menu__divider': {
margin: 0,
background: theme.otherVars.borderColor,
}
},
menuItem: {
@@ -47,13 +48,17 @@ const useStyles = makeStyles((theme)=>({
}
}));
export function PgMenu({open, className, ...props}) {
export function PgMenu({open, className, label, ...props}) {
const classes = useStyles();
const state = open ? 'open' : 'closed';
props.anchorRef?.current?.setAttribute('data-state', state);
return (
<ControlledMenu
state={open ? 'open' : 'closed'}
state={state}
{...props}
className={clsx(classes.menu, className)}
aria-label={label || 'Menu'}
data-state={state}
/>
);
}
@@ -61,6 +66,8 @@ export function PgMenu({open, className, ...props}) {
PgMenu.propTypes = {
open: PropTypes.bool,
className: CustomPropTypes.className,
label: PropTypes.string,
anchorRef: CustomPropTypes.ref,
};
export const PgMenuItem = applyStatics(MenuItem)(({hasCheck=false, checked=false, accesskey, shortcut, children, ...props})=>{
@@ -72,7 +79,8 @@ export const PgMenuItem = applyStatics(MenuItem)(({hasCheck=false, checked=false
props.onClick(e);
};
}
return <MenuItem {...props} onClick={onClick} className={classes.menuItem}>
const dataLabel = typeof(children) == 'string' ? children : undefined;
return <MenuItem {...props} onClick={onClick} className={classes.menuItem} data-label={dataLabel} data-checked={checked}>
{hasCheck && <CheckIcon className={classes.checkIcon} style={checked ? {} : {visibility: 'hidden'}} />}
{children}
{(shortcut || accesskey) && <div className={classes.shortcut}>({shortcutToString(shortcut, accesskey)})</div>}