547 lines
17 KiB
TypeScript
547 lines
17 KiB
TypeScript
import React, { useEffect, useRef } from "react";
|
|
import FormControl from "pages/Editor/FormControl";
|
|
import { Icon, IconSize } from "design-system-old";
|
|
import styled from "styled-components";
|
|
import { FieldArray, getFormValues } from "redux-form";
|
|
import { ControlProps } from "./BaseControl";
|
|
import _ from "lodash";
|
|
import { useSelector } from "react-redux";
|
|
import { getBindingOrConfigPathsForWhereClauseControl } from "entities/Action/actionProperties";
|
|
import { WhereClauseSubComponent } from "./utils";
|
|
import { TooltipComponent as Tooltip } from "design-system-old";
|
|
import useResponsiveBreakpoints from "utils/hooks/useResponsiveBreakpoints";
|
|
import { Colors } from "constants/Colors";
|
|
|
|
//Dropdwidth and Icon have fixed widths
|
|
const DropdownWidth = 82; //pixel value
|
|
const OperatorDropdownWidth = 100; // operators should have longer dropdown widths.
|
|
const Margin = 8;
|
|
|
|
// Type of the value for each condition
|
|
export type whereClauseValueType = {
|
|
condition?: string;
|
|
children?: [whereClauseValueType];
|
|
key?: string;
|
|
value?: string;
|
|
};
|
|
|
|
// Form config for the value field
|
|
const valueFieldConfig: any = {
|
|
key: "value",
|
|
controlType: "QUERY_DYNAMIC_INPUT_TEXT",
|
|
placeholderText: "Value",
|
|
};
|
|
|
|
// Form config for the key field
|
|
const keyFieldConfig: any = {
|
|
key: "key",
|
|
controlType: "QUERY_DYNAMIC_INPUT_TEXT",
|
|
placeholderText: "Column name",
|
|
};
|
|
|
|
// Form config for the condition field
|
|
const conditionFieldConfig: any = {
|
|
key: "operator",
|
|
controlType: "DROP_DOWN",
|
|
initialValue: "EQ",
|
|
options: [],
|
|
};
|
|
|
|
// Form config for the operator field
|
|
const logicalFieldConfig: any = {
|
|
key: "condition",
|
|
controlType: "DROP_DOWN",
|
|
initialValue: "EQ",
|
|
};
|
|
|
|
const LogicalFieldValue: any = styled.p<{
|
|
width: string | undefined;
|
|
size: string;
|
|
}>`
|
|
${(props) => (props.width ? "width: " + props.width + ";" : "")}
|
|
margin: 4px 0px;
|
|
border: solid 1.2px transparent;
|
|
text-align: right;
|
|
color: var(--appsmith-color-black-400);
|
|
font-size: 14px;
|
|
flex-shrink: 0;
|
|
|
|
${(props) =>
|
|
props.size === "small" &&
|
|
`
|
|
margin: 4px 0 0;
|
|
text-align: left;
|
|
`}
|
|
`;
|
|
|
|
// Component for the delete Icon
|
|
const CenteredIcon = styled(Icon)<{
|
|
alignSelf?: string;
|
|
top?: string;
|
|
}>`
|
|
position: relative;
|
|
align-self: ${(props) => (props.alignSelf ? props.alignSelf : "center")};
|
|
top: ${(props) => (props.top ? props.top : "0px")};
|
|
&.hide {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
`;
|
|
|
|
// We are setting a background color for the last two nested levels
|
|
const handleSecondaryBoxBackgroudColor = (
|
|
currentNestingLevel: number,
|
|
nestedLevels: number,
|
|
) => {
|
|
if (currentNestingLevel === nestedLevels) {
|
|
return `background-color: ${Colors.GRAY_100};`;
|
|
} else if (currentNestingLevel === nestedLevels - 1) {
|
|
return `background-color: ${Colors.GRAY_50};`;
|
|
} else {
|
|
return "";
|
|
}
|
|
};
|
|
|
|
// Wrapper inside the main box, contains the dropdown and ConditionWrapper
|
|
const SecondaryBox = styled.div<{
|
|
currentNestingLevel: number;
|
|
nestedLevels: number;
|
|
showBorder: boolean;
|
|
size: string;
|
|
}>`
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
border: solid 1.2px #e0dede;
|
|
border-width: ${(props) => (props?.showBorder ? "1.2px" : "0px")};
|
|
padding: ${(props) =>
|
|
props?.showBorder ? "0px 12px 28px 8px" : "4px 12px 24px 0px"};
|
|
width: 100%;
|
|
// Setting a max width to not have it really elongate on very large screens
|
|
max-width: 2000px;
|
|
|
|
${(props) =>
|
|
props.size === "small" &&
|
|
`
|
|
${handleSecondaryBoxBackgroudColor(
|
|
props.currentNestingLevel,
|
|
props.nestedLevels,
|
|
)}
|
|
padding-bottom: 20px;
|
|
`}
|
|
`;
|
|
|
|
// Wrapper to contain either a ConditionComponent or ConditionBlock
|
|
const ConditionWrapper = styled.div<{ size: string }>`
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: start;
|
|
width: 100%;
|
|
gap: 8px;
|
|
margin-top: 12px;
|
|
|
|
${(props) =>
|
|
props.size === "small" &&
|
|
`
|
|
margin-top: 0px;
|
|
gap: 0px;
|
|
flex-direction: column;
|
|
align-items: start;
|
|
`}
|
|
`;
|
|
|
|
// Wrapper to contain a single condition statement
|
|
const ConditionBox = styled.div<{ size?: string }>`
|
|
display: grid;
|
|
// The 4 elements(3 input fields and a close button) are horizontally aligned
|
|
// by default
|
|
grid-template-columns: auto 100px auto max-content;
|
|
grid-column-gap: 12px;
|
|
grid-row-gap: 8px;
|
|
width: 100%;
|
|
|
|
${(props) =>
|
|
props.size === "small" &&
|
|
`
|
|
// Smallest width of the component such that the text CTA's "ADD GROUP CONDITION"
|
|
// fits in the available space without overflow
|
|
min-width: 325px;
|
|
margin: 8px 0px;
|
|
// In small space we shift to a two column layout where the three inputs
|
|
// are verticall aligned one below the other.
|
|
grid-template-columns: repeat(2, max-content);
|
|
grid-template-rows: repeat(3, max-content);
|
|
grid-column-gap: 8px;
|
|
// The three input fields will be in the first column
|
|
& :not(:nth-child(4)) {
|
|
grid-column-start: 1;
|
|
}
|
|
// The fourth element i.e the close button will be placed in the second row
|
|
// to have it center aligned
|
|
& :nth-child(4) {
|
|
grid-column-start: 2;
|
|
grid-row-start: 2;
|
|
}
|
|
`}
|
|
`;
|
|
|
|
// Box containing the action buttons to add more filters
|
|
const ActionBox = styled.div<{ marginLeft: string; size: string }>`
|
|
display: flex;
|
|
margin-top: 16px;
|
|
flex-direction: row;
|
|
gap: 20px;
|
|
width: max-content;
|
|
justify-content: space-between;
|
|
position: absolute;
|
|
height: 24px;
|
|
text-transform: uppercase;
|
|
background-color: inherit;
|
|
bottom: 0px;
|
|
margin-left: ${(props) => props.marginLeft};
|
|
|
|
${(props) =>
|
|
props.size === "small" &&
|
|
`
|
|
margin-left: 0;
|
|
`}
|
|
`;
|
|
|
|
// The final button to add more filters/ filter groups
|
|
const AddMoreAction = styled.div<{ isDisabled?: boolean; size?: string }>`
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
line-height: 14px;
|
|
letter-spacing: 0.6px;
|
|
color: ${(props) =>
|
|
props.isDisabled ? "var(--appsmith-color-black-300)" : "#858282;"};
|
|
|
|
// Hide the "ADD GROUP CONDITION" text when in small space and is disabled
|
|
${(props) =>
|
|
props.size === "small" &&
|
|
props.isDisabled &&
|
|
`
|
|
display: none;
|
|
`}
|
|
`;
|
|
|
|
const GroupConditionBox = styled.div<{ size: string }>`
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 12px;
|
|
width: 100%;
|
|
|
|
${(props) =>
|
|
props.size === "small" &&
|
|
`
|
|
gap: 8px;
|
|
margin: 8px 0px;
|
|
flex-direction: row;
|
|
min-width: max-content;
|
|
`}
|
|
`;
|
|
|
|
const StyledTooltip = styled(Tooltip)`
|
|
display: flex;
|
|
align-items: center;
|
|
.bp3-tooltip.ads-global-tooltip .bp3-popover-content {
|
|
padding: 8px 12px;
|
|
line-height: 16px;
|
|
text-transform: none;
|
|
}
|
|
.bp3-tooltip.ads-global-tooltip .bp3-popover-arrow[style*="left"] {
|
|
left: auto !important;
|
|
right: 0px;
|
|
}
|
|
`;
|
|
// Component to display single line of condition, includes 2 inputs and 1 dropdown
|
|
function ConditionComponent(props: any, index: number) {
|
|
// Custom styles have to be passed as props, otherwise the UI will be disproportional
|
|
|
|
const keyPath = getBindingOrConfigPathsForWhereClauseControl(
|
|
props.field,
|
|
WhereClauseSubComponent.Key,
|
|
);
|
|
const valuePath = getBindingOrConfigPathsForWhereClauseControl(
|
|
props.field,
|
|
WhereClauseSubComponent.Value,
|
|
);
|
|
const conditionPath = getBindingOrConfigPathsForWhereClauseControl(
|
|
props.field,
|
|
WhereClauseSubComponent.Condition,
|
|
);
|
|
|
|
return (
|
|
<ConditionBox key={index} size={props.size}>
|
|
{/* Component to input the LHS for single condition */}
|
|
<FormControl
|
|
config={{
|
|
...keyFieldConfig,
|
|
configProperty: keyPath,
|
|
customStyles: {
|
|
// Smallest width where the full placeholder fits
|
|
minWidth: "100px",
|
|
},
|
|
}}
|
|
formName={props.formName}
|
|
/>
|
|
{/* Component to select the operator for the 2 inputs */}
|
|
<FormControl
|
|
config={{
|
|
...conditionFieldConfig,
|
|
// Set default width when in small space
|
|
customStyles:
|
|
props.size === "small"
|
|
? {}
|
|
: {
|
|
width: `${OperatorDropdownWidth}px`,
|
|
},
|
|
configProperty: conditionPath,
|
|
options: props.comparisonTypes,
|
|
initialValue: props.comparisonTypes[0].value,
|
|
}}
|
|
formName={props.formName}
|
|
/>
|
|
{/* Component to input the RHS for single component */}
|
|
<FormControl
|
|
config={{
|
|
...valueFieldConfig,
|
|
configProperty: valuePath,
|
|
customStyles: {
|
|
minWidth: "100px",
|
|
},
|
|
}}
|
|
formName={props.formName}
|
|
/>
|
|
{/* Component to render the delete icon */}
|
|
<CenteredIcon
|
|
cypressSelector={`t--where-clause-delete-[${index}]`}
|
|
name="cross"
|
|
onClick={(e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
props.onDeletePressed(index);
|
|
}}
|
|
size={IconSize.SMALL}
|
|
top="-1px"
|
|
/>
|
|
</ConditionBox>
|
|
);
|
|
}
|
|
|
|
// This is the block which contains an operator and multiple conditions/ condition blocks
|
|
function ConditionBlock(props: any) {
|
|
const targetRef = useRef<HTMLDivElement>(null);
|
|
// Smallest width of the component below which the individual input fields don't
|
|
// decrease in width anymore so we decide to shift to small space layout at this point
|
|
const size = useResponsiveBreakpoints(targetRef, [{ small: 505 }]);
|
|
const formValues: any = useSelector((state) =>
|
|
getFormValues(props.formName)(state),
|
|
);
|
|
|
|
const onDeletePressed = (index: number) => {
|
|
props.fields.remove(index);
|
|
};
|
|
|
|
// sometimes, this condition runs before the appropriate formValues has been initialized with the correct query values.
|
|
useEffect(() => {
|
|
// so make sure the new formValue has been initialized with the where object,
|
|
// especially when switching between various queries across the same Query editor form.
|
|
const whereConfigValue = _.get(formValues, props.configProperty);
|
|
// if the where object exists then it means the initialization of the form has been completed.
|
|
// if the where object exists and the length of children field is less than one, add a new field.
|
|
if (props.fields.length < 1 && !!whereConfigValue) {
|
|
if (props.currentNestingLevel === 0) {
|
|
props.fields.push({
|
|
condition: props.comparisonTypes[0].value,
|
|
});
|
|
} else {
|
|
props.onDeletePressed(props.index);
|
|
}
|
|
}
|
|
}, [props.fields.length]);
|
|
|
|
let isDisabled = false;
|
|
if (props.logicalTypes.length === 1) {
|
|
isDisabled = true;
|
|
}
|
|
const logicalFieldPath = getBindingOrConfigPathsForWhereClauseControl(
|
|
props.configProperty,
|
|
WhereClauseSubComponent.Condition,
|
|
);
|
|
const logicalFieldValue = _.get(formValues, logicalFieldPath);
|
|
|
|
return (
|
|
<SecondaryBox
|
|
className={`t--${props?.configProperty}`}
|
|
currentNestingLevel={props.currentNestingLevel}
|
|
nestedLevels={props.nestedLevels}
|
|
ref={targetRef}
|
|
showBorder={props.currentNestingLevel >= 1}
|
|
size={size}
|
|
>
|
|
{props.fields &&
|
|
props.fields.length > 0 &&
|
|
props.fields.map((field: any, index: number) => {
|
|
const fieldValue: whereClauseValueType = props.fields.get(index);
|
|
return (
|
|
<ConditionWrapper key={`where-${index}`} size={size}>
|
|
{/* Component to render the joining operator between multiple conditions */}
|
|
{index == 0 ? (
|
|
<LogicalFieldValue size={size} width={`${DropdownWidth}px`}>
|
|
Where
|
|
</LogicalFieldValue>
|
|
) : index == 1 ? (
|
|
<FormControl
|
|
config={{
|
|
...logicalFieldConfig,
|
|
customStyles: {
|
|
width: `${DropdownWidth}px`,
|
|
},
|
|
configProperty: logicalFieldPath,
|
|
options: props.logicalTypes,
|
|
initialValue: props.logicalTypes[0].value,
|
|
isDisabled,
|
|
}}
|
|
formName={props.formName}
|
|
/>
|
|
) : (
|
|
<LogicalFieldValue size={size} width={`${DropdownWidth}px`}>
|
|
{logicalFieldValue}
|
|
</LogicalFieldValue>
|
|
)}
|
|
{!!fieldValue && "children" in fieldValue ? (
|
|
<GroupConditionBox size={size}>
|
|
<FieldArray
|
|
component={ConditionBlock}
|
|
key={`${field}.children`}
|
|
name={`${field}.children`}
|
|
props={{
|
|
maxWidth: props.maxWidth,
|
|
configProperty: `${field}`,
|
|
formName: props.formName,
|
|
logicalTypes: props.logicalTypes,
|
|
comparisonTypes: props.comparisonTypes,
|
|
nestedLevels: props.nestedLevels,
|
|
currentNestingLevel: props.currentNestingLevel + 1,
|
|
onDeletePressed,
|
|
index,
|
|
}}
|
|
rerenderOnEveryChange={false}
|
|
/>
|
|
<CenteredIcon
|
|
alignSelf={"start"}
|
|
cypressSelector={`t--where-clause-delete-[${index}]`}
|
|
name="cross"
|
|
onClick={(e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
onDeletePressed(index);
|
|
}}
|
|
size={IconSize.SMALL}
|
|
top={"24px"}
|
|
/>
|
|
</GroupConditionBox>
|
|
) : (
|
|
ConditionComponent(
|
|
{
|
|
onDeletePressed,
|
|
field,
|
|
formName: props.formName,
|
|
comparisonTypes: props.comparisonTypes,
|
|
maxWidth: props.maxWidth,
|
|
currentNestingLevel: props.currentNestingLevel,
|
|
size,
|
|
},
|
|
index,
|
|
)
|
|
)}
|
|
</ConditionWrapper>
|
|
);
|
|
})}
|
|
<ActionBox marginLeft={`${DropdownWidth + Margin}px`} size={size}>
|
|
<AddMoreAction
|
|
className={`t--where-add-condition[${props?.currentNestingLevel}]`}
|
|
onClick={
|
|
() =>
|
|
props.fields.push({
|
|
key: "",
|
|
condition: props.comparisonTypes[0].value,
|
|
value: "",
|
|
})
|
|
// Add empty and key and value as it will required to create binding paths in getBindingPathsOfAction() at ActionProperties.ts
|
|
}
|
|
>
|
|
<Icon name="add-more-fill" size={IconSize.XL} />
|
|
<span style={{ marginLeft: "8px" }}>Add Condition</span>
|
|
</AddMoreAction>
|
|
{/* Check if the config allows more nesting, if it does, allow for adding more blocks */}
|
|
<StyledTooltip
|
|
content={
|
|
<span>
|
|
For S3 only 4 nested where <br /> condition group is allowed.
|
|
</span>
|
|
}
|
|
disabled={props.currentNestingLevel < props.nestedLevels}
|
|
donotUsePortal
|
|
position="bottom"
|
|
>
|
|
<AddMoreAction
|
|
className={`t--where-add-group-condition[${props?.currentNestingLevel}]`}
|
|
isDisabled={!(props.currentNestingLevel < props.nestedLevels)}
|
|
onClick={() => {
|
|
if (props.currentNestingLevel < props.nestedLevels) {
|
|
props.fields.push({
|
|
condition: props.logicalTypes[0].value,
|
|
children: [
|
|
{
|
|
condition: props.comparisonTypes[0].value,
|
|
},
|
|
],
|
|
});
|
|
}
|
|
}}
|
|
size={size}
|
|
>
|
|
<Icon name="add-more-fill" size={IconSize.XL} />
|
|
<span style={{ marginLeft: "8px" }}>Add Group Condition</span>
|
|
</AddMoreAction>
|
|
</StyledTooltip>
|
|
</ActionBox>
|
|
</SecondaryBox>
|
|
);
|
|
}
|
|
|
|
export default function WhereClauseControl(props: WhereClauseControlProps) {
|
|
const {
|
|
comparisonTypes, // All possible keys for the comparison
|
|
configProperty, // JSON path for the where clause data
|
|
formName, // Name of the form, used by redux-form lib to store the data in redux store
|
|
logicalTypes, // All possible keys for the logical operators joining multiple conditions
|
|
nestedLevels, // Number of nested levels allowed
|
|
} = props;
|
|
|
|
// Max width is designed in a way that the proportion stays same even after nesting
|
|
const maxWidth = 60; //in vw
|
|
return (
|
|
<FieldArray
|
|
component={ConditionBlock}
|
|
key={`${configProperty}.children`}
|
|
name={`${configProperty}.children`}
|
|
props={{
|
|
configProperty,
|
|
maxWidth,
|
|
formName,
|
|
logicalTypes,
|
|
comparisonTypes,
|
|
nestedLevels,
|
|
currentNestingLevel: 0,
|
|
}}
|
|
rerenderOnEveryChange={false}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export type WhereClauseControlProps = ControlProps;
|