UI: Search/Filter functionality for execution tasks names (#14547)

* search tasks

* fix linting

* clear initial filter state

* fix searchbar import

* fix - use empty string as init filter state

openmetadata-ui/src/main/resources/ui/src/components/Execution/Execution.component.tsx

@@ -42,6 +42,7 @@ import {
   getEpochMillisForPastDays,
 } from '../../utils/date-time/DateTimeUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
+import Searchbar from '../common/SearchBarComponent/SearchBar.component';
 import './execution.less';
 import ListView from './ListView/ListViewTab.component';
 import TreeViewTab from './TreeView/TreeViewTab.component';
@@ -54,6 +55,7 @@ interface ExecutionProps {
 const ExecutionsTab = ({ pipelineFQN, tasks }: ExecutionProps) => {
   const { t } = useTranslation();
   const [view, setView] = useState(PIPELINE_EXECUTION_TABS.LIST_VIEW);
+  const [searchValue, setSearchValue] = useState<string>('');
   const [executions, setExecutions] = useState<Array<PipelineStatus>>();
   const [datesSelected, setDatesSelected] = useState<boolean>(false);
   const [startTime, setStartTime] = useState(
@@ -132,6 +134,10 @@ const ExecutionsTab = ({ pipelineFQN, tasks }: ExecutionProps) => {
     fetchPipelineStatus(startTime, endTime);
   }, [pipelineFQN, datesSelected, startTime, endTime]);
 
+  const handleSearch = (value: string) => {
+    setSearchValue(value);
+  };
+
   return (
     <Row className="h-full p-md" data-testid="execution-tab" gutter={16}>
       <Col flex="auto">
@@ -199,11 +205,25 @@ const ExecutionsTab = ({ pipelineFQN, tasks }: ExecutionProps) => {
           </Col>
           <Col span={24}>
             {view === PIPELINE_EXECUTION_TABS.LIST_VIEW ? (
-              <ListView
-                executions={executions}
-                loading={isLoading}
-                status={status}
-              />
+              <div>
+                <Row>
+                  <Col className="mb-4" span={6}>
+                    <Searchbar
+                      removeMargin
+                      placeholder="Filter by task name"
+                      searchValue={searchValue}
+                      typingInterval={500}
+                      onSearch={handleSearch}
+                    />
+                  </Col>
+                </Row>
+                <ListView
+                  executions={executions}
+                  loading={isLoading}
+                  searchString={searchValue}
+                  status={status}
+                />
+              </div>
             ) : (
               <TreeViewTab
                 endTime={endTime}

openmetadata-ui/src/main/resources/ui/src/components/Execution/ListView/ListViewTab.component.test.tsx

@@ -32,6 +32,7 @@ const mockProps = {
   executions: EXECUTION_LIST_MOCK,
   status: StatusType.Successful,
   loading: false,
+  searchString: undefined
 };
 
 describe('Test ListViewTab Component', () => {

openmetadata-ui/src/main/resources/ui/src/components/Execution/ListView/ListViewTab.component.tsx

@@ -28,14 +28,20 @@ interface ListViewProps {
   executions: Array<PipelineStatus> | undefined;
   status: string;
   loading: boolean;
+  searchString: string | undefined;
 }
 
-const ListView = ({ executions, status, loading }: ListViewProps) => {
+const ListView = ({
+  executions,
+  status,
+  loading,
+  searchString,
+}: ListViewProps) => {
   const { t } = useTranslation();
 
   const tableData = useMemo(
-    () => getTableViewData(executions, status),
-    [executions, status]
+    () => getTableViewData(executions, status, searchString),
+    [executions, status, searchString]
   );
 
   const columns = useMemo(

openmetadata-ui/src/main/resources/ui/src/utils/executionUtils.tsx

@@ -60,7 +60,8 @@ export const StatusIndicator = ({ status }: StatusIndicatorInterface) => (
  */
 export const getTableViewData = (
   executions: PipelineStatus[] | undefined,
-  status: string | undefined
+  status: string | undefined,
+  searchString: string | undefined
 ): Array<ViewDataInterface> | undefined => {
   if (isUndefined(executions)) {
     return;
@@ -80,11 +81,17 @@ export const getTableViewData = (
     });
   });
 
-  return viewData.filter((data) =>
-    status !== MenuOptions.all
-      ? toLower(data.status)?.includes(toLower(status))
-      : data
-  );
+  return viewData
+    .filter((view) =>
+      searchString && searchString.length > 0
+        ? toLower(view.name)?.includes(toLower(searchString))
+        : true
+    )
+    .filter((view) =>
+      status !== MenuOptions.all
+        ? toLower(view.status)?.includes(toLower(status))
+        : true
+    );
 };
 
 /**
@@ -97,7 +104,7 @@ export const getTreeViewData = (
   executions: PipelineStatus[],
   status: string | undefined
 ) => {
-  const taskStatusArr = getTableViewData(executions, status);
+  const taskStatusArr = getTableViewData(executions, status, undefined);
 
   return groupBy(taskStatusArr, 'name');
 };