first commit

common/resources/client/datatable/page/data-table-emty-state-message.tsx

@@ -0,0 +1,42 @@
+import React, {ReactNode} from 'react';
+import {IllustratedMessage} from '../../ui/images/illustrated-message';
+import {SvgImage} from '../../ui/images/svg-image/svg-image';
+import {Trans} from '../../i18n/trans';
+import {useIsMobileMediaQuery} from '../../utils/hooks/is-mobile-media-query';
+
+export interface DataTableEmptyStateMessageProps {
+  isFiltering?: boolean;
+  title: ReactNode;
+  filteringTitle?: ReactNode;
+  image: string;
+  size?: 'sm' | 'md';
+  className?: string;
+}
+export function DataTableEmptyStateMessage({
+  isFiltering,
+  title,
+  filteringTitle,
+  image,
+  size,
+  className,
+}: DataTableEmptyStateMessageProps) {
+  const isMobile = useIsMobileMediaQuery();
+  if (!size) {
+    size = isMobile ? 'sm' : 'md';
+  }
+
+  // allow user to disable filtering message variation by not passing in "filteringTitle"
+  return (
+    <IllustratedMessage
+      className={className}
+      size={size}
+      image={<SvgImage src={image} />}
+      title={isFiltering && filteringTitle ? filteringTitle : title}
+      description={
+        isFiltering && filteringTitle ? (
+          <Trans message="Try another search query or different filters" />
+        ) : undefined
+      }
+    />
+  );
+}