mirror of
https://github.com/pgadmin-org/pgadmin4.git
synced 2025-02-25 18:55:31 -06:00
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:
committed by
Akshay Joshi
parent
31be1ae026
commit
ca8e14455f
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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};
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>}
|
||||
|
||||
Reference in New Issue
Block a user