chore: external merge request from Contributor

app/client/packages/design-system/widgets-old/package.json

@@ -7,11 +7,16 @@
   "license": "Apache-2.0",
   "scripts": {
     "lint": "yarn g:lint",
-    "prettier": "yarn g:prettier"
+    "prettier": "yarn g:prettier",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
   },
   "devDependencies": {
     "@svgr/webpack": "5.5.0",
+    "@testing-library/jest-dom": "^6.5.0",
     "@types/emoji-mart": "3.0.4",
+    "@types/jest": "^29.5.13",
     "@types/loadable__component": "^5.13.4",
     "@types/react-form": "^4.0.2",
     "@types/react-table": "*",
@@ -20,9 +25,12 @@
     "eslint-config-react": "^1.1.7",
     "eslint-plugin-storybook": "^0.6.8",
     "identity-obj-proxy": "3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "playwright": "^1.25.1",
     "postcss": "^8.4.31",
     "postcss-import": "^14.1.0",
+    "ts-jest": "^29.2.5",
     "tsconfig-paths-webpack-plugin": "^3.5.2"
   },
   "peerDependencies": {

app/client/packages/design-system/widgets-old/src/SearchComponent/index.test.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { render, fireEvent, screen } from "@testing-library/react";
+import SearchComponent from "../SearchComponent";
+import "@testing-library/jest-dom";
+
+jest.mock("lodash", () => ({
+  debounce: (fn: any) => fn,
+}));
+
+jest.mock("../utils/icon-loadables", () => ({
+  importSvg: jest.fn().mockReturnValue(() => <svg data-testid="cross-icon" />),
+}));
+
+describe("SearchComponent", () => {
+  const onSearchMock = jest.fn();
+
+  const renderComponent = (props = {}) => {
+    return render(
+      <SearchComponent
+        onSearch={onSearchMock}
+        placeholder="Search..."
+        value=""
+        {...props}
+      />,
+    );
+  };
+
+  it("1.should clear the search value and trigger onSearch with an empty value when the cross icon is clicked anh have focused", () => {
+    const { getByPlaceholderText, getByTestId } = renderComponent({
+      enableClientSideSearch: true,
+      value: "test",
+    });
+    const inputElement = screen.getByPlaceholderText(
+      "Search...",
+    ) as HTMLInputElement;
+    const clearButton = screen.getByTestId("cross-icon");
+
+    fireEvent.click(clearButton);
+
+    expect(inputElement).toHaveFocus();
+    expect(inputElement.value).toBe("");
+    expect(onSearchMock).toHaveBeenCalledWith("");
+  });
+
+  it("2.should reset localValue when component receives a new value prop", () => {
+    const { getByPlaceholderText, rerender } = renderComponent({
+      value: "initial",
+    });
+
+    const inputElement = screen.getByPlaceholderText(
+      "Search...",
+    ) as HTMLInputElement;
+
+    expect(inputElement.value).toBe("initial");
+
+    rerender(
+      <SearchComponent
+        onSearch={onSearchMock}
+        placeholder="Search..."
+        value="updated"
+      />,
+    );
+
+    expect(inputElement.value).toBe("updated");
+  });
+});

app/client/packages/design-system/widgets-old/src/SearchComponent/index.tsx

@@ -86,6 +86,7 @@ class SearchComponent extends React.Component<
   SearchProps,
   { localValue: string }
 > {
+  private inputRef = React.createRef<HTMLInputElement>();
   onDebouncedSearch = debounce(this.props.onSearch, 400);
   constructor(props: SearchProps) {
     super(props);
@@ -113,6 +114,10 @@ class SearchComponent extends React.Component<
   clearSearch = () => {
     this.setState({ localValue: "" });
     this.onDebouncedSearch("");
+
+    if (this.inputRef.current) {
+      this.inputRef.current.focus();
+    }
   };
 
   render() {
@@ -121,6 +126,7 @@ class SearchComponent extends React.Component<
         <SearchInputWrapper
           autoFocus={this.props.autoFocus}
           className={`${this.props.className} t--search-input`}
+          inputRef={this.inputRef}
           leftIcon="search"
           onChange={this.handleSearch}
           placeholder={this.props.placeholder}

app/client/packages/design-system/widgets-old/tsconfig.json

@@ -2,7 +2,8 @@
   "extends": "../../../tsconfig.json",
   "compilerOptions": {
     "baseUrl": "./src",
-    "typeRoots": ["./typings", "./node_modules/@types"]
+    "typeRoots": ["./typings", "./node_modules/@types"],
+    "types": ["jest"]
   },
   "include": ["./src/**/*"],
   "exclude": ["node_modules"]

app/client/src/widgets/MultiSelectTreeWidget/component/index.tsx

@@ -166,7 +166,16 @@ function MultiTreeSelectComponent({
   const clearButton = useMemo(
     () =>
       filter ? (
-        <Button icon="cross" minimal onClick={() => setFilter("")} />
+        <Button
+          icon="cross"
+          minimal
+          onClick={() => {
+            if (inputRef.current) {
+              inputRef.current.focus();
+            }
+            setFilter("");
+          }}
+        />
       ) : null,
     [filter],
   );

app/client/src/widgets/MultiSelectWidgetV2/component/index.tsx

@@ -175,7 +175,16 @@ function MultiSelectComponent({
   const clearButton = useMemo(
     () =>
       filter ? (
-        <Button icon="cross" minimal onClick={() => setFilter("")} />
+        <Button
+          icon="cross"
+          minimal
+          onClick={() => {
+            if (inputRef.current) {
+              inputRef.current.focus();
+            }
+            setFilter("");
+          }}
+        />
       ) : null,
     [filter],
   );

app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx

@@ -173,7 +173,16 @@ function SingleSelectTreeComponent({
   const clearButton = useMemo(
     () =>
       filter ? (
-        <Button icon="cross" minimal onClick={() => setFilter("")} />
+        <Button
+          icon="cross"
+          minimal
+          onClick={() => {
+            if (inputRef.current) {
+              inputRef.current.focus();
+            }
+            setFilter("");
+          }}
+        />
       ) : null,
     [filter],
   );