feat(ingress): ingresses datatable with add/edit ingresses EE-2615 (#7672)

app/react/components/Link.tsx

@@ -1,20 +1,25 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, AnchorHTMLAttributes } from 'react';
 import { UISref, UISrefProps } from '@uirouter/react';
+import clsx from 'clsx';
 
 interface Props {
   title?: string;
+  target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
 }
 
 export function Link({
   title = '',
+  className,
   children,
   ...props
 }: PropsWithChildren<Props> & UISrefProps) {
   return (
     // eslint-disable-next-line react/jsx-props-no-spreading
-    <UISref {...props}>
+    <UISref className={clsx('no-decoration', className)} {...props}>
       {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-      <a title={title}>{children}</a>
+      <a title={title} target={props.target}>
+        {children}
+      </a>
     </UISref>
   );
 }

app/react/components/datatables/Datatable.tsx

@@ -141,7 +141,11 @@ export function Datatable<
         <TableSettingsProvider settings={settingsStore}>
           <Table.Container>
             {isTitleVisible(titleOptions) && (
-              <Table.Title label={titleOptions.title} icon={titleOptions.icon}>
+              <Table.Title
+                label={titleOptions.title}
+                icon={titleOptions.icon}
+                featherIcon={titleOptions.featherIcon}
+              >
                 <SearchBar value={searchBarValue} onChange={setGlobalFilter} />
                 {renderTableActions && (
                   <Table.Actions>

app/react/components/datatables/Filter.tsx

@@ -3,42 +3,22 @@ import { useMemo } from 'react';
 import { Menu, MenuButton, MenuPopover } from '@reach/menu-button';
 import { ColumnInstance } from 'react-table';
 
-export function DefaultFilter({
-  column: { filterValue, setFilter, preFilteredRows, id },
-}: {
-  column: ColumnInstance;
-}) {
-  const options = useMemo(() => {
-    const options = new Set<string>();
-    preFilteredRows.forEach((row) => {
-      options.add(row.values[id]);
-    });
-
-    return Array.from(options);
-  }, [id, preFilteredRows]);
-
-  return (
-    <MultipleSelectionFilter
-      options={options}
-      filterKey={id}
-      value={filterValue}
-      onChange={setFilter}
-    />
-  );
-}
+export const DefaultFilter = filterHOC('Filter by state');
 
 interface MultipleSelectionFilterProps {
   options: string[];
   value: string[];
   filterKey: string;
   onChange: (value: string[]) => void;
+  menuTitle?: string;
 }
 
-function MultipleSelectionFilter({
+export function MultipleSelectionFilter({
   options,
   value = [],
   filterKey,
   onChange,
+  menuTitle = 'Filter by state',
 }: MultipleSelectionFilterProps) {
   const enabled = value.length > 0;
   return (
@@ -59,7 +39,7 @@ function MultipleSelectionFilter({
         </MenuButton>
         <MenuPopover className="dropdown-menu">
           <div className="tableMenu">
-            <div className="menuHeader">Filter by state</div>
+            <div className="menuHeader">{menuTitle}</div>
             <div className="menuContent">
               {options.map((option, index) => (
                 <div className="md-checkbox" key={index}>
@@ -91,3 +71,28 @@ function MultipleSelectionFilter({
     onChange([...value, option]);
   }
 }
+
+export function filterHOC(menuTitle: string) {
+  return function Filter({
+    column: { filterValue, setFilter, preFilteredRows, id },
+  }: {
+    column: ColumnInstance;
+  }) {
+    const options = useMemo(() => {
+      const options = new Set<string>();
+      preFilteredRows.forEach((row) => {
+        options.add(row.values[id]);
+      });
+      return Array.from(options);
+    }, [id, preFilteredRows]);
+    return (
+      <MultipleSelectionFilter
+        options={options}
+        filterKey={id}
+        value={filterValue}
+        onChange={setFilter}
+        menuTitle={menuTitle}
+      />
+    );
+  };
+}

app/react/components/form-components/FormError.tsx

@@ -1,16 +1,17 @@
 import { PropsWithChildren } from 'react';
+import clsx from 'clsx';
 
 import { Icon } from '@@/Icon';
 
-export function FormError({ children }: PropsWithChildren<unknown>) {
+interface Props {
+  className?: string;
+}
+
+export function FormError({ children, className }: PropsWithChildren<Props>) {
   return (
-    <div className="small text-warning vertical-center">
-      <Icon
-        icon="alert-triangle"
-        feather
-        className="icon icon-sm icon-warning"
-      />
-      {children}
-    </div>
+    <p className={clsx(`text-muted small vertical-center`, className)}>
+      <Icon icon="alert-triangle" className="icon-warning" feather />
+      <span className="text-warning">{children}</span>
+    </p>
   );
 }