[RAM] Use EuiDataGrid for the rules list

x-pack/plugins/triggers_actions_ui/common/experimental_features.ts

@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export type ExperimentalFeatures = typeof allowedExperimentalValues;
+
+/**
+ * A list of allowed values that can be used in `xpack.triggersActionsUi.enableExperimental`.
+ * This object is then used to validate and parse the value entered.
+ */
+export const allowedExperimentalValues = Object.freeze({
+  rulesListDatagrid: true,
+});
+
+type ExperimentalConfigKeys = Array<keyof ExperimentalFeatures>;
+type Mutable<T> = { -readonly [P in keyof T]: T[P] };
+
+const TriggersActionsUIInvalidExperimentalValue = class extends Error {};
+const allowedKeys = Object.keys(allowedExperimentalValues) as Readonly<ExperimentalConfigKeys>;
+
+/**
+ * Parses the string value used in `xpack.triggersActionsUi.enableExperimental` kibana configuration,
+ * which should be a string of values delimited by a comma (`,`)
+ *
+ * @param configValue
+ * @throws TriggersActionsUIInvalidExperimentalValue
+ */
+export const parseExperimentalConfigValue = (configValue: string[]): ExperimentalFeatures => {
+  const enabledFeatures: Mutable<Partial<ExperimentalFeatures>> = {};
+
+  for (const value of configValue) {
+    if (!isValidExperimentalValue(value)) {
+      throw new TriggersActionsUIInvalidExperimentalValue(`[${value}] is not valid.`);
+    }
+
+    enabledFeatures[value as keyof ExperimentalFeatures] = true;
+  }
+
+  return {
+    ...allowedExperimentalValues,
+    ...enabledFeatures,
+  };
+};
+
+export const isValidExperimentalValue = (value: string): boolean => {
+  return allowedKeys.includes(value as keyof ExperimentalFeatures);
+};
+
+export const getExperimentalAllowedValues = (): string[] => [...allowedKeys];

x-pack/plugins/triggers_actions_ui/common/types.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export interface TriggersActionsUiConfigType {
+  enableExperimental: string[];
+}

x-pack/plugins/triggers_actions_ui/public/application/home.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { lazy, useEffect } from 'react';
+import React, { lazy, useEffect, useMemo } from 'react';
 import { Route, RouteComponentProps, Switch } from 'react-router-dom';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiSpacer, EuiButtonEmpty, EuiPageHeader } from '@elastic/eui';
@@ -19,11 +19,16 @@ import { HealthCheck } from './components/health_check';
 import { HealthContextProvider } from './context/health_context';
 import { useKibana } from '../common/lib/kibana';
 import { suspendedComponentWithProps } from './lib/suspended_component_with_props';
+import { useExperimentalFeatures } from '../common/use_experimental_features';
 
 const ActionsConnectorsList = lazy(
   () => import('./sections/actions_connectors_list/components/actions_connectors_list')
 );
+
 const AlertsList = lazy(() => import('./sections/alerts_list/components/alerts_list'));
+const RulesListDatagrid = lazy(
+  () => import('./sections/alerts_list/components/rules_list_datagrid')
+);
 
 export interface MatchParams {
   section: Section;
@@ -41,6 +46,7 @@ export const TriggersActionsUIHome: React.FunctionComponent<RouteComponentProps<
     setBreadcrumbs,
     docLinks,
   } = useKibana().services;
+  const { rulesListDatagrid } = useExperimentalFeatures();
 
   const canShowActions = hasShowActionsCapability(capabilities);
   const tabs: Array<{
@@ -77,6 +83,11 @@ export const TriggersActionsUIHome: React.FunctionComponent<RouteComponentProps<
     chrome.docTitle.change(getCurrentDocTitle(section || 'home'));
   }, [section, chrome, setBreadcrumbs]);
 
+  const AlertsListComponent = useMemo(
+    () => (rulesListDatagrid ? RulesListDatagrid : AlertsList),
+    [rulesListDatagrid]
+  );
+
   return (
     <>
       <EuiPageHeader
@@ -132,7 +143,7 @@ export const TriggersActionsUIHome: React.FunctionComponent<RouteComponentProps<
             <Route
               exact
               path={routeToRules}
-              component={suspendedComponentWithProps(AlertsList, 'xl')}
+              component={suspendedComponentWithProps(AlertsListComponent, 'xl')}
             />
           </Switch>
         </HealthCheck>

x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.scss

@@ -6,7 +6,8 @@
   }
 }
 
-.euiTableRow {
+.euiTableRow,
+.euiDataGridRow {
   &:hover,
   &:focus-within,
   &[class*='-isActive'] {
@@ -16,6 +17,14 @@
   }
 }
 
+.euiDataGridHeaderCell {
+  font-size: 12px;
+}
+
+// .euiDataGridRowCell:not(.euiDataGridRowCell--lastColumn) {
+//   border-right: none;
+// }
+
 /**
  * 1. Only visually hide the action, so that it's still accessible to screen readers.
  * 2. When tabbed to, this element needs to be visible for keyboard accessibility.