refactor(ui/datatables): migrate views to use datatable component [EE-4064] (#7609)

app/react/components/datatables/DatatableHeader.tsx

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+
+import { IconProps } from '@@/Icon';
+
+import { SearchBar } from './SearchBar';
+import { Table } from './Table';
+
+type Props = {
+  title?: string;
+  titleIcon?: IconProps['icon'];
+  searchValue: string;
+  onSearchChange(value: string): void;
+  renderTableSettings?(): ReactNode;
+  renderTableActions?(): ReactNode;
+  description?: ReactNode;
+};
+
+export function DatatableHeader({
+  onSearchChange,
+  renderTableActions,
+  renderTableSettings,
+  searchValue,
+  title,
+  titleIcon,
+  description,
+}: Props) {
+  if (!title) {
+    return null;
+  }
+
+  return (
+    <Table.Title label={title} icon={titleIcon} description={description}>
+      <SearchBar value={searchValue} onChange={onSearchChange} />
+      {renderTableActions && (
+        <Table.Actions>{renderTableActions()}</Table.Actions>
+      )}
+      <Table.TitleActions>
+        {!!renderTableSettings && renderTableSettings()}
+      </Table.TitleActions>
+    </Table.Title>
+  );
+}