orc-shared 5.4.0-dev.0 → 5.5.1-dev.0

package/src/actions/navigation.js

@@ -25,6 +25,13 @@ export const removeTab = (module, path) => ({
 	payload: { module, path },
 });
 
+export const REMOVE_MODULE_TABS = "REMOVE_MODULE_TABS";
+
+export const removeModuleTabs = module => ({
+	type: REMOVE_MODULE_TABS,
+	payload: { module },
+});
+
 export const SET_HREF_CONFIG = "SET_HREF_CONFIG";
 
 export const setHrefConfig = (prependPath, prependHref, otherConfigs = {}) => ({

package/src/actions/navigation.test.js

@@ -5,6 +5,8 @@ import {
 	SET_HREF_CONFIG,
 	setClosingTabHandlerActions,
 	SET_CLOSING_TAB_HANDLER_ACTIONS,
+	removeModuleTabs,
+	REMOVE_MODULE_TABS,
 } from "./navigation";
 
 describe("removeTab", () => {
@@ -18,6 +20,16 @@ describe("removeTab", () => {
 		}));
 });
 
+describe("removeModuleTabs", () => {
+	it("creates a remove module tabs action", () =>
+		expect(removeModuleTabs, "when called with", ["module"], "to equal", {
+			type: REMOVE_MODULE_TABS,
+			payload: {
+				module: "module",
+			},
+		}));
+});
+
 describe("setHrefConfig", () => {
 	it("set href config action", () =>
 		expect(setHrefConfig, "when called with", ["/:scope/", "/scope/"], "to equal", {

package/src/actions/tasks.js

@@ -0,0 +1,77 @@
+import { makeActionTypes } from "./makeApiAction";
+import makeOrcApiAction from "./makeOrcApiAction";
+import {
+	deleteTaskInfoRequest,
+	getRequesterTasksInfoRequest,
+	getTaskExecutionLogsRequest,
+	getTaskInfoRequest,
+} from "./requestsApi";
+
+const GET_TASKINFO = "GET_TASKINFO";
+
+export const [GET_TASKINFO_REQUEST, GET_TASKINFO_SUCCESS, GET_TASKINFO_FAILURE] = makeActionTypes(GET_TASKINFO);
+
+export const getTaskInfo = taskId => makeOrcApiAction(GET_TASKINFO, getTaskInfoRequest.buildUrl(taskId));
+
+export const GET_TASK_LIST = "GET_TASK_LIST";
+
+export const ssrsDownloadFilterTaskNames = [
+	"Orckestra.Overture.Providers.CommerceEngine.Profiles.ProfileSchemaExportTask, Orckestra.Overture.Providers.CommerceEngine",
+	"Orckestra.Overture.Providers.CommerceEngine.Profiles.ProfileSchemaImportTask, Orckestra.Overture.Providers.CommerceEngine",
+	"Orckestra.Overture.Providers.CommerceEngine.Orders.ExportOrderSchemaTask, Orckestra.Overture.Providers.CommerceEngine",
+	"Orckestra.Overture.Providers.CommerceEngine.Orders.ImportOrderSchemaTask, Orckestra.Overture.Providers.CommerceEngine",
+	"Orckestra.Overture.Providers.CommerceEngine.Products.ImportExport.ExportProductsTask, Orckestra.Overture.Providers.CommerceEngine",
+	"Orckestra.Overture.Providers.CommerceEngine.Products.ImportExport.ProductSchemaExportTask, Orckestra.Overture.Providers.CommerceEngine",
+	"Orckestra.Overture.Providers.CommerceEngine.Products.ImportExport.ImportProductsTask, Orckestra.Overture.Providers.CommerceEngine",
+	"OrckestraCommerce.DataExchange.Product.Tasks.ProductExportTask, OrckestraCommerce.DataExchange",
+	"Orckestra.Overture.Providers.CommerceEngine.Marketing.ExportCouponCodesTask, Orckestra.Overture.Providers.CommerceEngine",
+	"Orckestra.Overture.Providers.CommerceEngine.Marketing.ImportCouponCodesTask, Orckestra.Overture.Providers.CommerceEngine",
+	"Orckestra.Overture.Providers.CommerceEngine.Marketing.GenerateCouponTask, Orckestra.Overture.Providers.CommerceEngine",
+	"Orckestra.Overture.Providers.CommerceEngine.Reporting.ReportExportTask, Orckestra.Overture.Providers.CommerceEngine",
+];
+
+export const [GET_TASK_LIST_REQUEST, GET_TASK_LIST_SUCCESS, GET_TASK_LIST_FAILURE] = makeActionTypes(GET_TASK_LIST);
+
+export const getTaskList = (requester, filterTaskNames, lastModified = null, addToActiveRequests = true) =>
+	makeOrcApiAction(
+		GET_TASK_LIST,
+		getRequesterTasksInfoRequest.buildUrl({
+			filterTaskNames: filterTaskNames,
+			requester: requester,
+			lastModified: lastModified,
+		}),
+		getRequesterTasksInfoRequest.verb,
+		{
+			meta: {
+				addToActiveRequests,
+			},
+		},
+	);
+
+const DELETE_TASK = "DELETE_TASK";
+
+export const [DELETE_TASK_REQUEST, DELETE_TASK_SUCCESS, DELETE_TASK_FAILURE] = makeActionTypes(DELETE_TASK);
+
+export const deleteTask = taskId =>
+	makeOrcApiAction(DELETE_TASK, deleteTaskInfoRequest.buildUrl(taskId), deleteTaskInfoRequest.verb, {
+		meta: { taskId },
+	});
+
+const GET_TASK_LOG = "GET_TASK_LOG";
+
+export const [GET_TASK_LOG_REQUEST, GET_TASK_LOG_SUCCESS, GET_TASK_LOG_FAILURE] = makeActionTypes(GET_TASK_LOG);
+
+export const getTaskLog = (taskId, addToActiveRequests = true) =>
+	makeOrcApiAction(GET_TASK_LOG, getTaskExecutionLogsRequest.buildUrl(taskId), getTaskExecutionLogsRequest.verb, {
+		meta: {
+			taskId,
+			addToActiveRequests,
+		},
+	});
+
+export const CLEAR_TASK_LOG = "CLEAR_TASK_LOG";
+
+export const clearTaskLog = taskId => ({
+	type: CLEAR_TASK_LOG,
+	meta: { taskId },
+});

package/src/actions/tasks.test.js

@@ -0,0 +1,169 @@
+import { RSAA } from "redux-api-middleware";
+import {
+	GET_TASKINFO_REQUEST,
+	GET_TASKINFO_SUCCESS,
+	GET_TASKINFO_FAILURE,
+	getTaskInfo,
+	getTaskList,
+	getTaskLog,
+	ssrsDownloadFilterTaskNames,
+	deleteTask,
+} from "./tasks";
+
+jest.mock("../utils/buildUrl", () => {
+	const modExport = {};
+	modExport.loadConfig = () => Promise.resolve({});
+	modExport.buildUrl = (path = [], params = "") => "URL: " + path.join("/") + " " + JSON.stringify(params);
+	return modExport;
+});
+
+describe("getTaskInfo", () => {
+	it("creates a RSAA to get task info", () =>
+		expect(getTaskInfo, "when called with", ["1234"], "to exhaustively satisfy", {
+			[RSAA]: {
+				types: [GET_TASKINFO_REQUEST, GET_TASKINFO_SUCCESS, GET_TASKINFO_FAILURE],
+				endpoint: 'URL: tasks/1234 ""',
+				method: "GET",
+				body: undefined,
+				credentials: "include",
+				bailout: expect.it("to be a function"),
+				headers: {
+					Accept: "application/json; charset=utf-8",
+					"Content-Type": "application/json",
+				},
+				options: { redirect: "follow" },
+			},
+		}));
+});
+
+describe("getTaskLog", () => {
+	it("creates a RSAA to get task info", () =>
+		expect(getTaskLog, "when called with", ["1234"], "to exhaustively satisfy", {
+			[RSAA]: {
+				types: [
+					{ type: "GET_TASK_LOG_REQUEST", meta: { taskId: "1234", addToActiveRequests: true } },
+					{ type: "GET_TASK_LOG_SUCCESS", meta: { taskId: "1234", addToActiveRequests: true } },
+					{ type: "GET_TASK_LOG_FAILURE", meta: { taskId: "1234", addToActiveRequests: true } },
+				],
+				endpoint: 'URL: tasks/1234/logs ""',
+				method: "GET",
+				body: undefined,
+				credentials: "include",
+				bailout: expect.it("to be a function"),
+				headers: {
+					Accept: "application/json; charset=utf-8",
+					"Content-Type": "application/json",
+				},
+				options: { redirect: "follow" },
+			},
+		}));
+
+	it("creates a RSAA to get task info with addToActiveRequests false", () =>
+		expect(getTaskLog, "when called with", ["1234", false], "to exhaustively satisfy", {
+			[RSAA]: {
+				types: [
+					{ type: "GET_TASK_LOG_REQUEST", meta: { taskId: "1234", addToActiveRequests: false } },
+					{ type: "GET_TASK_LOG_SUCCESS", meta: { taskId: "1234", addToActiveRequests: false } },
+					{ type: "GET_TASK_LOG_FAILURE", meta: { taskId: "1234", addToActiveRequests: false } },
+				],
+				endpoint: 'URL: tasks/1234/logs ""',
+				method: "GET",
+				body: undefined,
+				credentials: "include",
+				bailout: expect.it("to be a function"),
+				headers: {
+					Accept: "application/json; charset=utf-8",
+					"Content-Type": "application/json",
+				},
+				options: { redirect: "follow" },
+			},
+		}));
+});
+
+describe("getTaskList", () => {
+	it("creates a RSAA to get task info", () => {
+		const expectedParameters = {
+			filterTaskNames: ssrsDownloadFilterTaskNames,
+			requester: "freddie",
+			lastModified: "date value",
+		};
+
+		expect(
+			getTaskList,
+			"when called with",
+			["freddie", ssrsDownloadFilterTaskNames, "date value", false],
+			"to exhaustively satisfy",
+			{
+				[RSAA]: {
+					types: [
+						{ type: "GET_TASK_LIST_REQUEST", meta: { addToActiveRequests: false } },
+						{ type: "GET_TASK_LIST_SUCCESS", meta: { addToActiveRequests: false } },
+						{ type: "GET_TASK_LIST_FAILURE", meta: { addToActiveRequests: false } },
+					],
+					endpoint: "URL: tasks " + JSON.stringify(expectedParameters),
+					method: "GET",
+					body: undefined,
+					credentials: "include",
+					bailout: expect.it("to be a function"),
+					headers: {
+						Accept: "application/json; charset=utf-8",
+						"Content-Type": "application/json",
+					},
+					options: { redirect: "follow" },
+				},
+			},
+		);
+	});
+
+	it("creates a RSAA to get task info with null lastModified and true addToActiveRequests", () => {
+		const expectedParameters = {
+			filterTaskNames: ssrsDownloadFilterTaskNames,
+			requester: "freddie",
+			lastModified: null,
+		};
+
+		expect(getTaskList, "when called with", ["freddie", ssrsDownloadFilterTaskNames], "to exhaustively satisfy", {
+			[RSAA]: {
+				types: [
+					{ type: "GET_TASK_LIST_REQUEST", meta: { addToActiveRequests: true } },
+					{ type: "GET_TASK_LIST_SUCCESS", meta: { addToActiveRequests: true } },
+					{ type: "GET_TASK_LIST_FAILURE", meta: { addToActiveRequests: true } },
+				],
+				endpoint: "URL: tasks " + JSON.stringify(expectedParameters),
+				method: "GET",
+				body: undefined,
+				credentials: "include",
+				bailout: expect.it("to be a function"),
+				headers: {
+					Accept: "application/json; charset=utf-8",
+					"Content-Type": "application/json",
+				},
+				options: { redirect: "follow" },
+			},
+		});
+	});
+});
+
+describe("deleteTask", () => {
+	it("creates a RSAA to delete a task", () => {
+		expect(deleteTask, "when called with", ["1234"], "to exhaustively satisfy", {
+			[RSAA]: {
+				types: [
+					{ type: "DELETE_TASK_REQUEST", meta: { taskId: "1234" } },
+					{ type: "DELETE_TASK_SUCCESS", meta: { taskId: "1234" } },
+					{ type: "DELETE_TASK_FAILURE", meta: { taskId: "1234" } },
+				],
+				endpoint: 'URL: tasks/1234 ""',
+				method: "DELETE",
+				body: undefined,
+				credentials: "include",
+				bailout: expect.it("to be a function"),
+				headers: {
+					Accept: "application/json; charset=utf-8",
+					"Content-Type": "application/json",
+				},
+				options: { redirect: "follow" },
+			},
+		});
+	});
+});

package/src/buildStore.js

@@ -20,6 +20,7 @@ import timezonesReducer from "./reducers/timezones";
 import modulesReducer from "./reducers/modules";
 import metadataReducer from "./reducers/metadata";
 import requestStatesReducer from "./reducers/requestStates";
+import tasksReducer from "./reducers/tasks";
 
 window.BUILD_ID = BUILD_ID;
 window.BUILD_NUMBER = BUILD_NUMBER;
@@ -65,6 +66,7 @@ const buildStore = (reducers, devOptions = {}) => {
 			modules: modulesReducer,
 			metadata: metadataReducer,
 			requestStates: requestStatesReducer,
+			tasks: tasksReducer,
 		});
 	const rootReducer = buildReducer(reducers);
 

package/src/components/AppFrame/About.test.js

@@ -79,7 +79,7 @@ describe("About", () => {
 						</AboutLink>
 					</AboutParagraph>
 					<AboutParagraph>
-						{stringifyWithoutQuotes(messages["orc-shared.copyright"])}
+						{stringifyWithoutQuotes(messages["orc-shared.copyright"]).replace("{year}", new Date().getFullYear())}
 						<br />
 						{stringifyWithoutQuotes(messages["orc-shared.allRightsReserved"])}
 					</AboutParagraph>
@@ -130,7 +130,7 @@ describe("About", () => {
 						</AboutLink>
 					</AboutParagraph>
 					<AboutParagraph>
-						{stringifyWithoutQuotes(messages["orc-shared.copyright"])}
+						{stringifyWithoutQuotes(messages["orc-shared.copyright"]).replace("{year}", new Date().getFullYear())}
 						<br />
 						{stringifyWithoutQuotes(messages["orc-shared.allRightsReserved"])}
 					</AboutParagraph>
@@ -165,7 +165,7 @@ describe("About", () => {
 						</AboutLink>
 					</AboutParagraph>
 					<AboutParagraph>
-						{stringifyWithoutQuotes(messages["orc-shared.copyright"])}
+						{stringifyWithoutQuotes(messages["orc-shared.copyright"]).replace("{year}", new Date().getFullYear())}
 						<br />
 						{stringifyWithoutQuotes(messages["orc-shared.allRightsReserved"])}
 					</AboutParagraph>

package/src/components/AppFrame/Sidebar.js

@@ -60,9 +60,10 @@ const LogoSvg = styled.svg`
 `;
 
 export const Logo = () => (
-	<LogoSvg viewBox="0 0 260 260">
-		<path d="M1.11,125.62C1.11,74.94,40.22,39,93.72,39S186,74.94,186,125.62s-38.79,86.66-92.29,86.66S1.11,176.3,1.11,125.62Zm135.47,0c0-29.1-18.46-46.62-42.86-46.62S50.54,96.52,50.54,125.62s18.77,46.62,43.18,46.62S136.58,154.72,136.58,125.62Z" />
-		<circle cx="227.6" cy="181.13" r="31.29" />
+	<LogoSvg viewBox="0 0 354 354">
+		<g>
+			<path d="M0 241.41c0-65.49 50.53-111.98 119.66-111.98s119.25 46.49 119.25 111.98c0 65.49-50.13 111.97-119.25 111.97S0 306.9 0 241.41Zm175.04 0c0-37.6-23.85-60.23-55.38-60.23s-55.79 22.64-55.79 60.23c0 37.59 24.26 60.23 55.79 60.23 31.53 0 55.38-22.64 55.38-60.23Zm178.1-76.35h-77.48c0-48.29-39.29-87.58-87.58-87.58V0c91.02 0 165.07 74.05 165.07 165.06h-.01Z" />
+		</g>
 	</LogoSvg>
 );
 

package/src/components/MaterialUI/DataDisplay/PredefinedElements/InformationItem.js

@@ -7,6 +7,7 @@ import TextProps from "../../textProps";
 import { isReactComponent } from "../../../../utils/propertyValidator";
 import sharedMessages from "../../../../sharedMessages";
 import { useIntl } from "react-intl";
+import classNames from "classnames";
 
 const useStyles = makeStyles(theme => ({
 	title: {
@@ -53,7 +54,14 @@ const useStyles = makeStyles(theme => ({
 	},
 }));
 
-const InformationItemChildren = ({ classes, children, showNotAvailable, isMaxLineCountEnabled = true }) => {
+const InformationItemChildren = ({
+	classes,
+	children,
+	showNotAvailable,
+	isMaxLineCountEnabled = true,
+	tooltipClasses,
+	valueClasses,
+}) => {
 	const { formatMessage } = useIntl();
 
 	if (isReactComponent(children)) {
@@ -62,11 +70,11 @@ const InformationItemChildren = ({ classes, children, showNotAvailable, isMaxLin
 
 	const multipleLinesTextProps = new TextProps();
 	if (isMaxLineCountEnabled) multipleLinesTextProps.set(TextProps.propNames.lineCount, 2);
-	multipleLinesTextProps.set(TextProps.propNames.classes, classes.value);
+	multipleLinesTextProps.set(TextProps.propNames.classes, classNames(classes.value, valueClasses));
 
 	const value = children ?? (showNotAvailable ? formatMessage(sharedMessages.notAvailable) : "");
 
-	return <MultipleLinesText textProps={multipleLinesTextProps} children={value} />;
+	return <MultipleLinesText textProps={multipleLinesTextProps} children={value} tooltipClasses={tooltipClasses} />;
 };
 
 const InformationItemHeader = ({ classes, label, headerIcon }) => {
@@ -94,6 +102,8 @@ const InformationItem = ({
 	showNotAvailable = false,
 	marginTop = 0,
 	isMaxLineCountEnabled,
+	tooltipClasses,
+	valueClasses,
 }) => {
 	const classes = useStyles({ required, error, marginTop });
 
@@ -105,6 +115,8 @@ const InformationItem = ({
 				children={children}
 				showNotAvailable={showNotAvailable}
 				isMaxLineCountEnabled={isMaxLineCountEnabled}
+				tooltipClasses={tooltipClasses}
+				valueClasses={valueClasses}
 			/>
 		</div>
 	);

package/src/components/MaterialUI/DataDisplay/TooltippedElements/MultipleLinesText.js

@@ -11,7 +11,7 @@ const useStyles = makeStyles(theme => ({
 	},
 }));
 
-const MultipleLinesText = ({ children, titleValue, textProps }) => {
+const MultipleLinesText = ({ children, titleValue, textProps, tooltipClasses }) => {
 	const classes = useStyles();
 
 	const [isClamped, setIsClamped] = useState(false);
@@ -48,6 +48,7 @@ const MultipleLinesText = ({ children, titleValue, textProps }) => {
 			titleValue={title}
 			alwaysDisplay={isClamped}
 			onClampStart={event => clampHandler(event)}
+			tooltipClasses={tooltipClasses}
 		/>
 	);
 };

package/src/components/MaterialUI/Inputs/PredefinedElements/SearchControl.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from "react";
+import React, { useRef, useEffect } from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import SelectProps from "../SelectProps";
 import Icon from "../../DataDisplay/Icon";
@@ -80,12 +80,9 @@ export const useStyles = makeStyles(theme => ({
 	},
 	parentInput: {
 		flex: "13 0 0",
-		zIndex: props => (props.focused ? 99 : 1),
-		border: props =>
-			props.focused
-				? `${theme.spacing(0.1)} solid ${theme.palette.focus}`
-				: `${theme.spacing(0.1)} solid ${theme.palette.grey.borders}`,
-		boxShadow: props => (props.focused ? `0 0 4px ${theme.palette.focus}` : "none"),
+		zIndex: 1,
+		border: `${theme.spacing(0.1)} solid ${theme.palette.grey.borders}`,
+		boxShadow: "none",
 		width: "100%",
 		display: "inherit",
 		marginLeft: theme.spacing(-0.1),
@@ -104,6 +101,11 @@ export const useStyles = makeStyles(theme => ({
 				borderBottomLeftRadius: 0,
 			},
 		},
+		"&:focus-within": {
+			zIndex: 99,
+			border: `${theme.spacing(0.1)} solid ${theme.palette.focus}`,
+			boxShadow: `0 0 4px ${theme.palette.focus}`,
+		},
 	},
 	selectRoot: {
 		zIndex: 10,
@@ -149,17 +151,30 @@ const SearchControl = ({
 	searchOption,
 	onSearch = () => {},
 	disabled,
+	focusAndSelectSearchFieldOnLoad = true,
+	focusSearchOnSearchOptionChange = false,
 }) => {
 	searchOptions = !searchOptions?.length ? null : searchOptions;
 	searchOption = getSearchOptionValue(searchOptions, searchOption);
-	const [inputFocused, setInputFocused] = useState(false);
 
-	const classes = useStyles({ focused: inputFocused });
+	const classes = useStyles();
 
 	const inputRef = useRef();
 
 	const update = value => {
-		onSearch(value, defaultValue);
+		if (focusSearchOnSearchOptionChange && inputRef.current) {
+			onSearch(value, "");
+			setTimeout(() => {
+				/* istanbul ignore next */
+				if (inputRef.current) {
+					inputRef.current.value = "";
+					inputRef.current.focus();
+					inputRef.current.select();
+				}
+			}, 0);
+		} else {
+			onSearch(value, defaultValue);
+		}
 	};
 
 	const selectProps = new SelectProps();
@@ -178,28 +193,28 @@ const SearchControl = ({
 	selectProps.setStyle(SelectProps.ruleNames.root, classes.selectRoot);
 	selectProps.setStyle(SelectProps.ruleNames.paper, classes.selectPaper);
 
-	const handleKeyDown = e => {
-		if (e.key === "Enter") {
-			onSearch(searchOption, e.target.value);
-			e.preventDefault();
-			e.stopPropagation();
+	useEffect(() => {
+		/* istanbul ignore next */
+		if (focusAndSelectSearchFieldOnLoad && inputRef.current) {
+			inputRef.current.focus();
+			inputRef.current.select();
 		}
-	};
-
-	const onFocusedEvent = (event, focused) => {
-		setInputFocused(focused);
-		event.preventDefault();
-		event.stopPropagation();
-	};
+	}, [focusAndSelectSearchFieldOnLoad]);
 
 	const SelectSection = () => {
 		if (searchOptions === null) return null;
 		else return <Select className={classes.selectInput} options={searchOptions} selectProps={selectProps} />;
 	};
 
+	const onSubmit = event => {
+		// using form submit instead of a keydown (with key=enter) to allow the 'enter key' event to be canceled elsewhere to avoid the submit event
+		onSearch(searchOption, inputRef.current?.value);
+		event.preventDefault();
+	};
+
 	const inputSection = (
-		<div data-qa="searchInput" data-qa-is-focused={inputFocused} className={classes.parentInput}>
-			<form data-qa="searchForm" className={classes.fullWidth}>
+		<div data-qa="searchInput" className={classes.parentInput}>
+			<form data-qa="searchForm" className={classes.fullWidth} onSubmitCapture={onSubmit}>
 				<Input
 					placeholder={placeholder}
 					defaultValue={defaultValue}
@@ -207,10 +222,7 @@ const SearchControl = ({
 					type="text"
 					disabled={disabled}
 					classes={{ input: classes.controlInput }}
-					onKeyDown={handleKeyDown}
 					disableUnderline={true}
-					onFocus={e => onFocusedEvent(e, true)}
-					onBlur={e => onFocusedEvent(e, false)}
 					endAdornment={
 						<InputAdornment position="start">
 							<IconButton

package/src/components/MaterialUI/Inputs/PredefinedElements/SearchControl.test.js

@@ -53,10 +53,11 @@ describe("useStyles", () => {
 });
 
 describe("SearchControl Component", () => {
-	const stateSetter = sinon.spy().named("focus");
-	const useStateMock = initState => [initState, stateSetter];
-
+	beforeEach(() => {
+		jest.useFakeTimers();
+	});
 	afterEach(() => {
+		jest.useRealTimers();
 		jest.clearAllMocks();
 	});
 
@@ -232,8 +233,7 @@ describe("SearchControl Component", () => {
 		expect(searchInput.length, "to be", 1);
 
 		searchInput.instance().value = "abc";
-		searchInput.simulate("keydown", { key: "Tab" });
-		searchInput.simulate("keydown", { key: "Enter" });
+		mountedComponent.find("form").simulate("submit", { preventDefault: () => {} });
 
 		expect(onSearchEvent, "to have calls satisfying", [{ args: ["aValue", "abc"] }]);
 	});
@@ -371,7 +371,7 @@ describe("SearchControl Component", () => {
 		expect(onSearchEvent, "to have calls satisfying", [{ args: ["anotherValue", "abcdef123"] }]);
 	});
 
-	it("Search Control should render with the 2nd value", () => {
+	it("Search Control should clear the search when changing the option", () => {
 		const options = [
 			{ value: "aValue", label: "aLabel" },
 			{ value: "anotherValue", label: "anotherLabel" },
@@ -385,8 +385,8 @@ describe("SearchControl Component", () => {
 					placeholder="placeHolderTest"
 					defaultValue={"abcdef123"}
 					searchOptions={options}
-					searchOption={"anotherValue"}
 					onSearch={onSearchEvent}
+					focusSearchOnSearchOptionChange={true}
 				/>
 			</TestWrapper>
 		);
@@ -395,48 +395,53 @@ describe("SearchControl Component", () => {
 
 		const selectMui = mountedComponent.find(SelectMUI);
 
-		expect(selectMui.props().value, "to equal", "anotherValue");
-	});
+		const event = {
+			target: {
+				value: "anotherValue",
+			},
+		};
 
-	it("focusing text input should set focus on container", () => {
-		jest.spyOn(React, "useState").mockImplementation(useStateMock);
+		onSearchEvent.resetHistory();
+
+		selectMui.invoke("onChange")(event);
+
+		expect(onSearchEvent.callCount, "to equal", 1);
+		expect(onSearchEvent, "to have calls satisfying", [{ args: ["anotherValue", ""] }]);
+
+		const allInputs = mountedComponent.find("input");
+		const searchInput = allInputs.find("[placeholder='placeHolderTest']");
+		expect(searchInput.length, "to be", 1);
 
+		expect(searchInput.instance().value, "to be", "abcdef123");
+		jest.runOnlyPendingTimers();
+		expect(searchInput.instance().value, "to be", "");
+	});
+
+	it("Search Control should render with the 2nd value", () => {
 		const options = [
 			{ value: "aValue", label: "aLabel" },
 			{ value: "anotherValue", label: "anotherLabel" },
 		];
 
+		const onSearchEvent = sinon.spy().named("search");
+
 		const component = (
 			<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
-				<SearchControl placeholder="placeHolderTest" searchOptions={options} />
+				<SearchControl
+					placeholder="placeHolderTest"
+					defaultValue={"abcdef123"}
+					searchOptions={options}
+					searchOption={"anotherValue"}
+					onSearch={onSearchEvent}
+				/>
 			</TestWrapper>
 		);
 
 		const mountedComponent = mount(component);
 
-		const allInputs = mountedComponent.find("input");
-		const searchInput = allInputs.find("[placeholder='placeHolderTest']");
-		expect(searchInput.length, "to be", 1);
-
-		let searchEditParent = mountedComponent.find('[data-qa="searchInput"]');
-		expect(searchEditParent.length, "to be", 1);
-
-		expect(searchEditParent.props()["data-qa-is-focused"], "to be", false);
-
-		const event = {
-			preventDefault: () => {},
-			stopPropagation: () => {},
-		};
-
-		searchInput.invoke("onFocus")(event);
-
-		searchEditParent = mountedComponent.find('[data-qa="searchInput"]');
-		expect(searchEditParent.props()["data-qa-is-focused"], "to be", true);
-
-		searchInput.invoke("onBlur")(event);
+		const selectMui = mountedComponent.find(SelectMUI);
 
-		searchEditParent = mountedComponent.find('[data-qa="searchInput"]');
-		expect(searchEditParent.props()["data-qa-is-focused"], "to be", false);
+		expect(selectMui.props().value, "to equal", "anotherValue");
 	});
 
 	it("Renders Search Control component without errors when disabled", () => {

package/src/components/MaterialUI/hocs/withDeferredTooltip.js

@@ -8,7 +8,7 @@ import { isString, isObject, isStringNullOrWhitespace, isReactComponent } from "
 
 const withDeferredTooltip =
 	Comp =>
-	({ titleValue, alwaysDisplay, ...props }) => {
+	({ titleValue, alwaysDisplay, tooltipClasses, ...props }) => {
 		const [shouldBeTooltipped, setShouldBeTooltipped] = useState(false);
 
 		const defaultComponent = <Comp onMouseEnter={event => makeComponentTooltipped(event)} {...props} />;
@@ -32,6 +32,7 @@ const withDeferredTooltip =
 		return (
 			<MuiTooltip
 				arrow
+				classes={tooltipClasses ?? null}
 				title={titleValue}
 				disableHoverListener={false}
 				disableFocusListener={true}