@sapui5/sap.fe.controls 1.139.0 → 1.141.0

package/src/sap/fe/controls/easyFilter/EasyFilterBarContainer.tsx

@@ -34,16 +34,21 @@ import deepClone from "sap/base/util/deepClone";
 import { and, bindState } from "sap/fe/base/BindingToolkit";
 import EasyFilterInput from "sap/fe/controls/easyFilter/EasyFilterInput";
 import type EasyFilterToken from "sap/fe/controls/easyFilter/Token";
+import HBox from "sap/m/HBox";
 import MessageStrip from "sap/m/MessageStrip";
+import MessageToast from "sap/m/MessageToast";
 import OverflowToolbar from "sap/m/OverflowToolbar";
+import ToggleButton from "sap/m/ToggleButton";
 import ToolbarSpacer from "sap/m/ToolbarSpacer";
 import MessageType from "sap/ui/core/message/MessageType";
 import FilterOperator from "sap/ui/model/FilterOperator";
 import FESRHelper from "sap/ui/performance/trace/FESRHelper";
 import type EasyFilter from "ux/eng/fioriai/reuse/easyfilter/EasyFilter";
-import type { EasyFilterMetadata, EasyFilterResult, PropertyMetadata, Success } from "ux/eng/fioriai/reuse/easyfilter/EasyFilter";
+import type { EasyFilterMetadata, EasyFilterResult, PropertyMetadata } from "ux/eng/fioriai/reuse/easyfilter/EasyFilter";
+import type { Success } from "ux/eng/fioriai/reuse/shared";
 import type { EventHandler } from "../../../../../../../types/extension_types";
 import { AINotice } from "./AINotice";
+import { triggerPXIntegration } from "./PXFeedback";
 import EasyFilterUtils from "./utils";
 
 //For current release we are ignoring "All" and "Any"
@@ -116,16 +121,7 @@ export type EasyFilterPropertyMetadata = PropertyMetadata &
 				type: Exclude<TokenType, "ValueHelp">;
 				defaultValue?: TokenSelectedValuesDefinition[];
 		  }
-	) & {
-		filterRestriction?:
-			| "SingleValue"
-			| "MultiValue"
-			| "SingleRange"
-			| "MultiRange"
-			| "SearchExpression"
-			| "MultiRangeOrSearchExpression";
-		hiddenFilter?: boolean;
-	};
+	);
 
 // We need the third arguement because there might be a chance of composite keys scenario
 type DataFetcher = (
@@ -150,7 +146,6 @@ export type EasyFilterBarContainer$ShowValueHelpEvent = UI5Event<
 
 /*
  * Delivery for beta release for the easy filter feature.
- * @experimental
  */
 @defineUI5Class("sap.fe.controls.easyFilter.EasyFilterBarContainer")
 export default class EasyFilterBarContainer extends Control {
@@ -210,6 +205,10 @@ export default class EasyFilterBarContainer extends Control {
 		singleValueMessageStripText?: string;
 		messageStripText?: string;
 		showMessageStrip?: boolean;
+		messageStripType: MessageType;
+		thumbButtonEnabled: boolean;
+		thumbUpButtonPressed: boolean;
+		thumbDownButtonPressed: boolean;
 	}> = {
 		showResult: false,
 		tokens: [] as TokenDefinition[],
@@ -217,7 +216,11 @@ export default class EasyFilterBarContainer extends Control {
 		showSingleValueMessageStrip: false,
 		singleValueMessageStripText: "",
 		messageStripText: "",
-		showMessageStrip: false
+		showMessageStrip: false,
+		messageStripType: MessageType.Error,
+		thumbButtonEnabled: true,
+		thumbUpButtonPressed: false,
+		thumbDownButtonPressed: false
 	};
 
 	private innerControlPopover?: Popover;
@@ -395,8 +398,9 @@ export default class EasyFilterBarContainer extends Control {
 			}
 		} else {
 			// error
-			this.easyFilterInput.current?.setAsInvalid(easyFilterResult.message);
 			this.removeNonMandatoryTokens();
+			this.setMessageStrip(easyFilterResult.message);
+			this.state.messageStripType = MessageType.Warning;
 			Log.error("Error while generating filter criteria: ", easyFilterResult.message);
 		}
 
@@ -409,11 +413,6 @@ export default class EasyFilterBarContainer extends Control {
 	 * @private
 	 */
 	private handleV1Success(easyFilterResult: Success<EasyFilter.EasyFilterResult>): void {
-		if (easyFilterResult.data.unclear) {
-			this.easyFilterInput.current?.setAsInvalid(
-				this.resourceBundle.getText("M_EASY_FILTER_UNCLEAR_INPUT", [easyFilterResult.data.unclear])
-			);
-		}
 		if (easyFilterResult.data.filter) {
 			// We need to show a message to the user that the filter criteria has been generated
 			Log.debug("Filter criteria generated: ", JSON.stringify(easyFilterResult.data.filter, null, 2));
@@ -421,14 +420,14 @@ export default class EasyFilterBarContainer extends Control {
 			const tokens = [...this.state.tokens].filter((token) => token.isRequired);
 
 			// Clear the previous message strip for validated filters
-			this.clearMessageStripForValidatedFilters();
+			this.clearMessageStrip();
 
 			// Validate and apply the filter criteria
 			EasyFilterUtils.formatData(
 				tokens,
 				easyFilterResult.data.filter,
 				this.filterBarMetadata as EasyFilterPropertyMetadata[],
-				this.setMessageStripForValidatedFilters.bind(this)
+				this.setMessageStrip.bind(this)
 			);
 
 			//We only have to call the dataFetcher on the VH tokens which have been asked by the user
@@ -483,6 +482,9 @@ export default class EasyFilterBarContainer extends Control {
 
 			const updatedTokens = this.verifySingleSelectTokenValues(tokens);
 			this.state.showResult = true;
+			this.state.thumbButtonEnabled = true;
+			this.state.thumbDownButtonPressed = false;
+			this.state.thumbUpButtonPressed = false;
 			this.state.tokens = updatedTokens;
 		}
 	}
@@ -507,12 +509,18 @@ export default class EasyFilterBarContainer extends Control {
 		return tokens;
 	}
 
-	clearMessageStripForValidatedFilters(): void {
+	clearMessageStrip(): void {
+		this.state.thumbDownButtonPressed = false;
+		this.state.thumbUpButtonPressed = false;
 		this.state.showMessageStrip = false;
 		this.state.messageStripText = "";
+		this.state.messageStripType = MessageType.Error;
 	}
 
-	setMessageStripForValidatedFilters(text: string): void {
+	setMessageStrip(text: string): void {
+		this.state.thumbDownButtonPressed = false;
+		this.state.thumbUpButtonPressed = false;
+		this.state.thumbButtonEnabled = true;
 		this.state.messageStripText = text;
 		this.state.showMessageStrip = true;
 	}
@@ -612,8 +620,79 @@ export default class EasyFilterBarContainer extends Control {
 		(this.tokenizer?.current as FocusHandlingControl).onsapfocusleave = (): void => {};
 	}
 
+	private onThumbUpPressed(): void {
+		this.state.thumbUpButtonPressed = true;
+		this.state.thumbDownButtonPressed = false;
+		triggerPXIntegration("thumbUp");
+		this.onThumbPressed();
+	}
+
+	private onThumbDownPressed(): void {
+		this.state.thumbDownButtonPressed = true;
+		this.state.thumbUpButtonPressed = false;
+		triggerPXIntegration("thumbDown");
+		this.onThumbPressed();
+	}
+
+	private onThumbPressed(): void {
+		this.state.thumbButtonEnabled = false;
+		MessageToast.show(this.resourceBundle.getText("C_EASY_FILTER_FEEDBACK_SENT"));
+	}
+
 	createContent(): VBox {
 		const $topGoBtn = createReference<Button>();
+		const thumbUpButtonTokenizer = (
+			<ToggleButton
+				icon={"sap-icon://thumb-up"}
+				tooltip={this.resourceBundle.getText("C_EASY_FILTER_THUMBS_UP")}
+				type={"Transparent"}
+				press={(): void => {
+					return this.onThumbUpPressed();
+				}}
+				enabled={bindState(this.state, "thumbButtonEnabled")}
+				pressed={bindState(this.state, "thumbUpButtonPressed")}
+			/>
+		);
+		FESRHelper.setSemanticStepname(thumbUpButtonTokenizer, "press", "fe4:eft:t:thumbUp");
+		const thumbDownButtonTokenizer = (
+			<ToggleButton
+				icon={"sap-icon://thumb-down"}
+				tooltip={this.resourceBundle.getText("C_EASY_FILTER_THUMBS_DOWN")}
+				type={"Transparent"}
+				press={(): void => {
+					return this.onThumbDownPressed();
+				}}
+				enabled={bindState(this.state, "thumbButtonEnabled")}
+				pressed={bindState(this.state, "thumbDownButtonPressed")}
+			/>
+		);
+		FESRHelper.setSemanticStepname(thumbDownButtonTokenizer, "press", "fe4:eft:t:thumbDown");
+		const thumbUpButtonMessageStripe = (
+			<ToggleButton
+				icon={"sap-icon://thumb-up"}
+				tooltip={this.resourceBundle.getText("C_EASY_FILTER_THUMBS_UP")}
+				type={"Transparent"}
+				press={(): void => {
+					return this.onThumbUpPressed();
+				}}
+				enabled={bindState(this.state, "thumbButtonEnabled")}
+				pressed={bindState(this.state, "thumbUpButtonPressed")}
+			/>
+		);
+		FESRHelper.setSemanticStepname(thumbUpButtonMessageStripe, "press", "fe4:eft:ms:thumbUp");
+		const thumbDownButtonMessageStripe = (
+			<ToggleButton
+				icon={"sap-icon://thumb-down"}
+				tooltip={this.resourceBundle.getText("C_EASY_FILTER_THUMBS_DOWN")}
+				type={"Transparent"}
+				press={(): void => {
+					return this.onThumbDownPressed();
+				}}
+				enabled={bindState(this.state, "thumbButtonEnabled")}
+				pressed={bindState(this.state, "thumbDownButtonPressed")}
+			/>
+		);
+		FESRHelper.setSemanticStepname(thumbDownButtonMessageStripe, "press", "fe4:eft:ms:thumbDown");
 		const outVBox = (
 			<VBox>
 				<FlexBox renderType="Bare">
@@ -689,6 +768,9 @@ export default class EasyFilterBarContainer extends Control {
 								}
 							}}
 						</Tokenizer>
+						<HBox>
+							{thumbUpButtonTokenizer}, {thumbDownButtonTokenizer}
+						</HBox>
 						<Button
 							text={this.resourceBundle.getText("M_EASY_FILTER_RESET")}
 							type={ButtonType.Transparent}
@@ -713,18 +795,21 @@ export default class EasyFilterBarContainer extends Control {
 						}}
 					></MessageStrip>
 				</FlexBox>
-				<FlexBox renderType="Bare">
+				<FlexBox renderType="Bare" class={"sapFeControlsGap8px"}>
 					<MessageStrip
-						type={MessageType.Error}
+						type={bindState(this.state, "messageStripType")}
 						text={bindState(this.state, "messageStripText")}
 						showIcon={true}
 						enableFormattedText={true}
-						visible={bindState(this.state, "showMessageStrip")}
 						showCloseButton={true}
 						close={(): void => {
-							this.clearMessageStripForValidatedFilters();
+							this.clearMessageStrip();
 						}}
+						visible={bindState(this.state, "showMessageStrip")}
 					></MessageStrip>
+					<HBox visible={bindState(this.state, "showMessageStrip")}>
+						{thumbUpButtonMessageStripe}, {thumbDownButtonMessageStripe}
+					</HBox>
 				</FlexBox>
 			</VBox>
 		) as VBox;
@@ -757,6 +842,7 @@ export default class EasyFilterBarContainer extends Control {
 		//Set the Value States of all the Tokens back to None
 		this.tokenizer.current?.getTokens().forEach((token) => token.setProperty("valueState", ValueState.None));
 		this.tokenizer.current?.getTokens().forEach((token) => token.setProperty("valueStateText", null));
+		this.clearMessageStrip(); //clear the message strip for validated filters
 	}
 
 	//The below code updates the existing state by fetching the key and selectedValues