[RAM] Refactor: move shareable component sandbox to its own plugin (#134611)

* Move shareable component sandbox to its own plugin

* Add newline and fix test

* disable lint for no-default-export on example tests

* Fix lint

* Address feedback

* [CI] Auto-commit changed files from 'node scripts/precommit_hook.js --ref HEAD~1..HEAD --fix'

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

tsconfig.base.json

@@ -281,6 +281,8 @@
       "@kbn/third-party-lens-navigation-prompt-plugin/*": ["x-pack/examples/third_party_lens_navigation_prompt/*"],
       "@kbn/third-party-vis-lens-example-plugin": ["x-pack/examples/third_party_vis_lens_example"],
       "@kbn/third-party-vis-lens-example-plugin/*": ["x-pack/examples/third_party_vis_lens_example/*"],
+      "@kbn/triggers-actions-ui-example-plugin": ["x-pack/examples/triggers_actions_ui_example"],
+      "@kbn/triggers-actions-ui-example-plugin/*": ["x-pack/examples/triggers_actions_ui_example/*"],
       "@kbn/ui-actions-enhanced-examples-plugin": ["x-pack/examples/ui_actions_enhanced_examples"],
       "@kbn/ui-actions-enhanced-examples-plugin/*": ["x-pack/examples/ui_actions_enhanced_examples/*"],
       "@kbn/actions-plugin": ["x-pack/plugins/actions"],

x-pack/examples/triggers_actions_ui_example/kibana.json

@@ -0,0 +1,20 @@
+{
+  "id": "triggersActionsUiExample",
+  "version": "0.0.1",
+  "kibanaVersion": "kibana",
+  "owner": {
+    "name": "Response Ops",
+    "githubTeam": "response-ops"
+  },
+  "server": false,
+  "ui": true,
+  "requiredPlugins": [
+    "triggersActionsUi",
+    "data",
+    "alerting",
+    "developerExamples",
+    "kibanaReact"
+  ],
+  "optionalPlugins": [],
+  "requiredBundles": []
+}

x-pack/examples/triggers_actions_ui_example/public/application.tsx

@@ -0,0 +1,150 @@
+/*
+ * 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.
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { BrowserRouter as Router, Route } from 'react-router-dom';
+import { EuiPage, EuiTitle, EuiText, EuiSpacer } from '@elastic/eui';
+import { AppMountParameters, CoreStart } from '@kbn/core/public';
+import { TriggersAndActionsUIPublicPluginStart } from '@kbn/triggers-actions-ui-plugin/public';
+import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
+import { DataPublicPluginStart } from '@kbn/data-plugin/public';
+import { TriggersActionsUiExamplePublicStartDeps } from './plugin';
+
+import { Page } from './components/page';
+import { Sidebar } from './components/sidebar';
+
+import { RulesListSandbox } from './components/rules_list_sandbox';
+import { RulesListNotifyBadgeSandbox } from './components/rules_list_notify_badge_sandbox';
+import { RuleTagBadgeSandbox } from './components/rule_tag_badge_sandbox';
+import { RuleTagFilterSandbox } from './components/rule_tag_filter_sandbox';
+import { RuleEventLogListSandbox } from './components/rule_event_log_list_sandbox';
+import { RuleStatusDropdownSandbox } from './components/rule_status_dropdown_sandbox';
+import { RuleStatusFilterSandbox } from './components/rule_status_filter_sandbox';
+
+export interface TriggersActionsUiExampleComponentParams {
+  http: CoreStart['http'];
+  basename: string;
+  triggersActionsUi: TriggersAndActionsUIPublicPluginStart;
+  data: DataPublicPluginStart;
+}
+
+const TriggersActionsUiExampleApp = ({
+  basename,
+  triggersActionsUi,
+}: TriggersActionsUiExampleComponentParams) => {
+  return (
+    <Router basename={basename}>
+      <EuiPage>
+        <Sidebar />
+        <Route
+          exact
+          path="/"
+          render={() => (
+            <Page title="Home" isHome>
+              <EuiTitle size="l">
+                <h1>Welcome to the Triggers Actions UI plugin example</h1>
+              </EuiTitle>
+              <EuiSpacer />
+              <EuiText>
+                This example plugin displays the shareable components in the Triggers Actions UI
+                plugin. It also serves as a sandbox to run functional tests to ensure the shareable
+                components are functioning correctly outside of their original plugin.
+              </EuiText>
+            </Page>
+          )}
+        />
+        <Route
+          path="/rules_list"
+          render={() => (
+            <Page title="Rules List">
+              <RulesListSandbox triggersActionsUi={triggersActionsUi} />
+            </Page>
+          )}
+        />
+        <Route
+          path="/rules_list_notify_badge"
+          render={() => (
+            <Page title="Rule List Notify Badge">
+              <RulesListNotifyBadgeSandbox triggersActionsUi={triggersActionsUi} />
+            </Page>
+          )}
+        />
+        <Route
+          path="/rule_tag_badge"
+          render={() => (
+            <Page title="Rule Tag Badge">
+              <RuleTagBadgeSandbox triggersActionsUi={triggersActionsUi} />
+            </Page>
+          )}
+        />
+        <Route
+          path="/rule_tag_filter"
+          render={() => (
+            <Page title="Rule Tag Filter">
+              <RuleTagFilterSandbox triggersActionsUi={triggersActionsUi} />
+            </Page>
+          )}
+        />
+        <Route
+          path="/rule_event_log_list"
+          render={() => (
+            <Page title="Run History List">
+              <RuleEventLogListSandbox triggersActionsUi={triggersActionsUi} />
+            </Page>
+          )}
+        />
+        <Route
+          path="/rule_status_dropdown"
+          render={() => (
+            <Page title="Rule Status Dropdown">
+              <RuleStatusDropdownSandbox triggersActionsUi={triggersActionsUi} />
+            </Page>
+          )}
+        />
+        <Route
+          path="/rule_status_filter"
+          render={() => (
+            <Page title="Rule Status Filter">
+              <RuleStatusFilterSandbox triggersActionsUi={triggersActionsUi} />
+            </Page>
+          )}
+        />
+      </EuiPage>
+    </Router>
+  );
+};
+
+export const renderApp = (
+  core: CoreStart,
+  deps: TriggersActionsUiExamplePublicStartDeps,
+  { appBasePath, element }: AppMountParameters
+) => {
+  const { http } = core;
+  const { triggersActionsUi } = deps;
+  const { ruleTypeRegistry, actionTypeRegistry } = triggersActionsUi;
+  ReactDOM.render(
+    <KibanaContextProvider
+      services={{
+        ...core,
+        ...deps,
+        ruleTypeRegistry,
+        actionTypeRegistry,
+      }}
+    >
+      <TriggersActionsUiExampleApp
+        basename={appBasePath}
+        http={http}
+        triggersActionsUi={deps.triggersActionsUi}
+        data={deps.data}
+      />
+    </KibanaContextProvider>,
+    element
+  );
+
+  return () => ReactDOM.unmountComponentAtNode(element);
+};

x-pack/examples/triggers_actions_ui_example/public/components/page.tsx

@@ -0,0 +1,66 @@
+/*
+ * 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.
+ */
+
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import {
+  EuiPageContent,
+  EuiPageContentBody,
+  EuiPageBody,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiTitle,
+  EuiBreadcrumbs,
+  EuiSpacer,
+} from '@elastic/eui';
+
+interface PageProps {
+  title: string;
+  crumb?: string;
+  isHome?: boolean;
+}
+
+export const Page: React.FC<PageProps> = (props) => {
+  const { title, crumb, isHome, children } = props;
+
+  const history = useHistory();
+
+  const breadcrumbs: Array<{
+    text: string;
+    onClick?: () => void;
+  }> = [
+    {
+      text: crumb ?? title,
+    },
+  ];
+  if (!isHome) {
+    breadcrumbs.splice(0, 0, {
+      text: 'Home',
+      onClick: () => {
+        history.push(`/`);
+      },
+    });
+  }
+
+  return (
+    <EuiPageBody>
+      <EuiPageHeader>
+        <EuiPageHeaderSection>
+          <EuiTitle size="l">
+            <h1>{title}</h1>
+          </EuiTitle>
+        </EuiPageHeaderSection>
+      </EuiPageHeader>
+      <EuiBreadcrumbs responsive={false} breadcrumbs={breadcrumbs} />
+      <EuiSpacer />
+      <EuiPageContent>
+        <EuiPageContentBody>{children}</EuiPageContentBody>
+      </EuiPageContent>
+    </EuiPageBody>
+  );
+};

x-pack/examples/triggers_actions_ui_example/public/components/rule_event_log_list_sandbox.tsx

@@ -6,10 +6,14 @@
  */
 
 import React from 'react';
-import { getRuleEventLogListLazy } from '../../../common/get_rule_event_log_list';
+import { TriggersAndActionsUIPublicPluginStart } from '@kbn/triggers-actions-ui-plugin/public';
 
-export const RuleEventLogListSandbox = () => {
+interface SandboxProps {
-  const props: any = {
+  triggersActionsUi: TriggersAndActionsUIPublicPluginStart;
+}
+
+export const RuleEventLogListSandbox = ({ triggersActionsUi }: SandboxProps) => {
+  const componenProps: any = {
     rule: {
       id: 'test',
     },
@@ -40,5 +44,7 @@ export const RuleEventLogListSandbox = () => {
     }),
   };
 
-  return <div style={{ height: '400px' }}>{getRuleEventLogListLazy(props)}</div>;
+  return (
+    <div style={{ height: '400px' }}>{triggersActionsUi.getRuleEventLogList(componenProps)}</div>
+  );
 };

x-pack/examples/triggers_actions_ui_example/public/components/rule_status_dropdown_sandbox.tsx

@@ -5,16 +5,20 @@
  * 2.0.
  */
 
-import React, { useState } from 'react';
+import { useState } from 'react';
 import moment from 'moment';
-import { getRuleStatusDropdownLazy } from '../../../common/get_rule_status_dropdown';
+import { TriggersAndActionsUIPublicPluginStart } from '@kbn/triggers-actions-ui-plugin/public';
 
-export const RuleStatusDropdownSandbox: React.FC<{}> = () => {
+interface SandboxProps {
+  triggersActionsUi: TriggersAndActionsUIPublicPluginStart;
+}
+
+export const RuleStatusDropdownSandbox = ({ triggersActionsUi }: SandboxProps) => {
   const [enabled, setEnabled] = useState(true);
   const [isSnoozedUntil, setIsSnoozedUntil] = useState<Date | null>(null);
   const [muteAll, setMuteAll] = useState(false);
 
-  return getRuleStatusDropdownLazy({
+  return triggersActionsUi.getRuleStatusDropdown({
     rule: {
       enabled,
       isSnoozedUntil,

x-pack/examples/triggers_actions_ui_example/public/components/rule_status_filter_sandbox.tsx

@@ -6,17 +6,23 @@
  */
 
 import React, { useState } from 'react';
-import { RuleStatusFilterProps } from '../../../types';
+import {
-import { getRuleStatusFilterLazy } from '../../../common/get_rule_status_filter';
+  TriggersAndActionsUIPublicPluginStart,
+  RuleStatusFilterProps,
+} from '@kbn/triggers-actions-ui-plugin/public';
 
-export const RuleStatusFilterSandbox = () => {
+interface SandboxProps {
+  triggersActionsUi: TriggersAndActionsUIPublicPluginStart;
+}
+
+export const RuleStatusFilterSandbox = ({ triggersActionsUi }: SandboxProps) => {
   const [selectedStatuses, setSelectedStatuses] = useState<
     RuleStatusFilterProps['selectedStatuses']
   >([]);
 
   return (
     <div style={{ flex: 1 }}>
-      {getRuleStatusFilterLazy({
+      {triggersActionsUi.getRuleStatusFilter({
         selectedStatuses,
         onChange: setSelectedStatuses,
       })}

x-pack/examples/triggers_actions_ui_example/public/components/rule_tag_badge_sandbox.tsx

@@ -12,16 +12,20 @@
  */
 
 import React, { useState } from 'react';
-import { getRuleTagBadgeLazy } from '../../../common/get_rule_tag_badge';
+import { TriggersAndActionsUIPublicPluginStart } from '@kbn/triggers-actions-ui-plugin/public';
+
+interface SandboxProps {
+  triggersActionsUi: TriggersAndActionsUIPublicPluginStart;
+}
 
 const tags = ['tag1', 'tag2', 'tag3', 'tag4'];
 
-export const RuleTagBadgeSandbox = () => {
+export const RuleTagBadgeSandbox = ({ triggersActionsUi }: SandboxProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
   return (
     <div style={{ flex: 1 }}>
-      {getRuleTagBadgeLazy({
+      {triggersActionsUi.getRuleTagBadge({
         isOpen,
         tags,
         onClick: () => setIsOpen(true),

x-pack/examples/triggers_actions_ui_example/public/components/rule_tag_filter_sandbox.tsx

@@ -6,14 +6,18 @@
  */
 import React, { useState } from 'react';
 import { EuiSpacer } from '@elastic/eui';
-import { getRuleTagFilterLazy } from '../../../common/get_rule_tag_filter';
+import { TriggersAndActionsUIPublicPluginStart } from '@kbn/triggers-actions-ui-plugin/public';
 
-export const RuleTagFilterSandbox = () => {
+interface SandboxProps {
+  triggersActionsUi: TriggersAndActionsUIPublicPluginStart;
+}
+
+export const RuleTagFilterSandbox = ({ triggersActionsUi }: SandboxProps) => {
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
 
   return (
     <div style={{ flex: 1 }}>
-      {getRuleTagFilterLazy({
+      {triggersActionsUi.getRuleTagFilter({
         tags: ['tag1', 'tag2', 'tag3', 'tag4'],
         selectedTags,
         onChange: setSelectedTags,

x-pack/examples/triggers_actions_ui_example/public/components/rules_list_notify_badge_sandbox.tsx

@@ -6,8 +6,14 @@
  */
 
 import React, { useState } from 'react';
-import { RuleTableItem } from '../../../types';
+import {
-import { getRulesListNotifyBadgeLazy } from '../../../common/get_rules_list_notify_badge';
+  TriggersAndActionsUIPublicPluginStart,
+  RuleTableItem,
+} from '@kbn/triggers-actions-ui-plugin/public';
+
+interface SandboxProps {
+  triggersActionsUi: TriggersAndActionsUIPublicPluginStart;
+}
 
 const mockRule: RuleTableItem = {
   id: '1',
@@ -41,13 +47,13 @@ const mockRule: RuleTableItem = {
   enabledInLicense: true,
 };
 
-export const RulesListNotifyBadgeSandbox = () => {
+export const RulesListNotifyBadgeSandbox = ({ triggersActionsUi }: SandboxProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
   return (
     <div style={{ flex: 1 }}>
-      {getRulesListNotifyBadgeLazy({
+      {triggersActionsUi.getRulesListNotifyBadge({
         rule: mockRule,
         isOpen,
         isLoading,

x-pack/examples/triggers_actions_ui_example/public/components/rules_list_sandbox.tsx

@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+import React from 'react';
+import { TriggersAndActionsUIPublicPluginStart } from '@kbn/triggers-actions-ui-plugin/public';
+
+interface SandboxProps {
+  triggersActionsUi: TriggersAndActionsUIPublicPluginStart;
+}
+
+const style = {
+  flex: 1,
+};
+
+export const RulesListSandbox = ({ triggersActionsUi }: SandboxProps) => {
+  return <div style={style}>{triggersActionsUi.getRulesList({})}</div>;
+};

x-pack/examples/triggers_actions_ui_example/public/components/sidebar.tsx

@@ -0,0 +1,68 @@
+/*
+ * 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.
+ */
+
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { EuiPageSideBar, EuiSideNav } from '@elastic/eui';
+
+export const Sidebar = () => {
+  const history = useHistory();
+  return (
+    <EuiPageSideBar>
+      <EuiSideNav
+        items={[
+          {
+            name: 'Component Sandboxes',
+            id: 'component_sandboxes',
+            items: [
+              {
+                id: 'home',
+                name: 'Home',
+                onClick: () => history.push('/'),
+              },
+              {
+                id: 'rules_list',
+                name: 'Rules List',
+                onClick: () => history.push(`/rules_list`),
+              },
+              {
+                id: 'rules_list_notify_badge',
+                name: 'Rules List Notify Badge',
+                onClick: () => history.push(`/rules_list_notify_badge`),
+              },
+              {
+                id: 'rule_tag_badge',
+                name: 'Rule Tag Badge',
+                onClick: () => history.push(`/rule_tag_badge`),
+              },
+              {
+                id: 'rule_tag_filter',
+                name: 'Rule Tag Filter',
+                onClick: () => history.push(`/rule_tag_filter`),
+              },
+              {
+                id: 'rule_event_log_list',
+                name: 'Run History List',
+                onClick: () => history.push(`/rule_event_log_list`),
+              },
+              {
+                id: 'rule_status_dropdown',
+                name: 'Rule Status Dropdown',
+                onClick: () => history.push(`/rule_status_dropdown`),
+              },
+              {
+                id: 'rule_status_filter',
+                name: 'Rule Status Filter',
+                onClick: () => history.push(`/rule_status_filter`),
+              },
+            ],
+          },
+        ]}
+      />
+    </EuiPageSideBar>
+  );
+};

x-pack/examples/triggers_actions_ui_example/public/index.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.
+ */
+
+import { TriggersActionsUiExamplePlugin } from './plugin';
+
+export const plugin = () => new TriggersActionsUiExamplePlugin();

x-pack/examples/triggers_actions_ui_example/public/plugin.tsx

@@ -0,0 +1,59 @@
+/*
+ * 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.
+ */
+
+import { Plugin, CoreSetup, AppMountParameters, AppNavLinkStatus } from '@kbn/core/public';
+import { PluginSetupContract as AlertingSetup } from '@kbn/alerting-plugin/public';
+import { DataPublicPluginStart } from '@kbn/data-plugin/public';
+import { DeveloperExamplesSetup } from '@kbn/developer-examples-plugin/public';
+
+import {
+  TriggersAndActionsUIPublicPluginSetup,
+  TriggersAndActionsUIPublicPluginStart,
+} from '@kbn/triggers-actions-ui-plugin/public';
+
+export interface TriggersActionsUiExamplePublicSetupDeps {
+  alerting: AlertingSetup;
+  triggersActionsUi: TriggersAndActionsUIPublicPluginSetup;
+  developerExamples: DeveloperExamplesSetup;
+}
+
+export interface TriggersActionsUiExamplePublicStartDeps {
+  alerting: AlertingSetup;
+  triggersActionsUi: TriggersAndActionsUIPublicPluginStart;
+  data: DataPublicPluginStart;
+}
+
+export class TriggersActionsUiExamplePlugin
+  implements Plugin<void, void, TriggersActionsUiExamplePublicSetupDeps>
+{
+  public setup(
+    core: CoreSetup<TriggersActionsUiExamplePublicStartDeps, void>,
+    setup: TriggersActionsUiExamplePublicSetupDeps
+  ) {
+    const { developerExamples } = setup;
+
+    core.application.register({
+      id: 'triggersActionsUiExample',
+      title: 'Triggers Actions UI Example',
+      navLinkStatus: AppNavLinkStatus.hidden,
+      async mount(params: AppMountParameters) {
+        const [coreStart, devStart] = await core.getStartServices();
+        const { renderApp } = await import('./application');
+        return renderApp(coreStart, devStart, params);
+      },
+    });
+
+    developerExamples.register({
+      appId: 'triggersActionsUiExample',
+      title: 'Shared Reusable Alerting Components',
+      description:
+        'Sandbox for shared reusable alerting components (triggers actions UI shareable components)',
+    });
+  }
+  public start() {}
+  public stop() {}
+}

x-pack/examples/triggers_actions_ui_example/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./target/types"
+  },
+  "include": [
+    "index.ts",
+    "public/**/*.ts",
+    "public/**/*.tsx",
+    "server/**/*.ts",
+    "../../../typings/**/*",
+  ],
+  "exclude": [],
+  "references": [
+    { "path": "../../../src/core/tsconfig.json" },
+    { "path": "../../../src/plugins/kibana_react/tsconfig.json" },
+    { "path": "../../plugins/alerting/tsconfig.json" },
+    { "path": "../../plugins/triggers_actions_ui/tsconfig.json" },
+    { "path": "../../../examples/developer_examples/tsconfig.json" },
+  ]
+}

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

@@ -14,7 +14,6 @@ export type ExperimentalFeatures = typeof allowedExperimentalValues;
 export const allowedExperimentalValues = Object.freeze({
   rulesListDatagrid: true,
   internalAlertsTable: false,
-  internalShareableComponentsSandbox: false,
   ruleTagFilter: true,
   ruleStatusFilter: true,
   rulesDetailLogs: true,

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

@@ -73,7 +73,7 @@ export const renderApp = (deps: TriggersAndActionsUiServices) => {
 
 export const App = ({ deps }: { deps: TriggersAndActionsUiServices }) => {
   const { dataViews, uiSettings, theme$ } = deps;
-  const sections: Section[] = ['rules', 'connectors', 'alerts', '__components_sandbox'];
+  const sections: Section[] = ['rules', 'connectors', 'alerts'];
   const isDarkMode = useObservable<boolean>(uiSettings.get$('theme:darkMode'));
 
   const sectionsRegex = sections.join('|');

x-pack/plugins/triggers_actions_ui/public/application/constants/index.ts

@@ -13,14 +13,13 @@ export {
 } from '@kbn/alerting-plugin/common';
 export { BASE_ACTION_API_PATH, INTERNAL_BASE_ACTION_API_PATH } from '@kbn/actions-plugin/common';
 
-export type Section = 'connectors' | 'rules' | 'alerts' | '__components_sandbox';
+export type Section = 'connectors' | 'rules' | 'alerts';
 
 export const routeToHome = `/`;
 export const routeToConnectors = `/connectors`;
 export const routeToRules = `/rules`;
 export const routeToRuleDetails = `/rule/:ruleId`;
 export const routeToInternalAlerts = `/alerts`;
-export const routeToInternalShareableComponentsSandbox = '/__components_sandbox';
 export const legacyRouteToRules = `/alerts`;
 export const legacyRouteToRuleDetails = `/alert/:alertId`;
 

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

@@ -11,13 +11,7 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiSpacer, EuiButtonEmpty, EuiPageHeader } from '@elastic/eui';
 
 import { getIsExperimentalFeatureEnabled } from '../common/get_experimental_features';
-import {
+import { Section, routeToConnectors, routeToRules, routeToInternalAlerts } from './constants';
-  Section,
-  routeToConnectors,
-  routeToRules,
-  routeToInternalAlerts,
-  routeToInternalShareableComponentsSandbox,
-} from './constants';
 import { getAlertingSectionBreadcrumb } from './lib/breadcrumb';
 import { getCurrentDocTitle } from './lib/doc_title';
 import { hasShowActionsCapability } from './lib/capabilities';
@@ -32,9 +26,6 @@ const ActionsConnectorsList = lazy(
 );
 const RulesList = lazy(() => import('./sections/rules_list/components/rules_list'));
 const AlertsPage = lazy(() => import('./sections/alerts_table/alerts_page'));
-const InternalShareableComponentsSandbox = lazy(
-  () => import('./internal/shareable_components_sandbox/shareable_components_sandbox')
-);
 
 export interface MatchParams {
   section: Section;
@@ -54,9 +45,6 @@ export const TriggersActionsUIHome: React.FunctionComponent<RouteComponentProps<
     docLinks,
   } = useKibana().services;
   const isInternalAlertsTableEnabled = getIsExperimentalFeatureEnabled('internalAlertsTable');
-  const isInternalShareableComponentsSandboxEnabled = getIsExperimentalFeatureEnabled(
-    'internalShareableComponentsSandbox'
-  );
 
   const canShowActions = hasShowActionsCapability(capabilities);
   const tabs: Array<{
@@ -162,13 +150,6 @@ export const TriggersActionsUIHome: React.FunctionComponent<RouteComponentProps<
               path={routeToRules}
               component={suspendedComponentWithProps(RulesList, 'xl')}
             />
-            {isInternalShareableComponentsSandboxEnabled && (
-              <Route
-                exact
-                path={routeToInternalShareableComponentsSandbox}
-                component={suspendedComponentWithProps(InternalShareableComponentsSandbox, 'xl')}
-              />
-            )}
             {isInternalAlertsTableEnabled ? (
               <Route
                 exact

x-pack/plugins/triggers_actions_ui/public/application/internal/shareable_components_sandbox/shareable_components_sandbox.tsx

@@ -1,32 +0,0 @@
-/*
- * 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.
- */
-
-import React from 'react';
-import { RuleStatusDropdownSandbox } from './rule_status_dropdown_sandbox';
-import { RuleTagFilterSandbox } from './rule_tag_filter_sandbox';
-import { RuleStatusFilterSandbox } from './rule_status_filter_sandbox';
-import { RuleTagBadgeSandbox } from './rule_tag_badge_sandbox';
-import { RuleEventLogListSandbox } from './rule_event_log_list_sandbox';
-import { RulesListNotifyBadgeSandbox } from './rules_list_notify_badge_sandbox';
-import { RulesListSandbox } from './rules_list_sandbox';
-
-export const InternalShareableComponentsSandbox: React.FC<{}> = () => {
-  return (
-    <>
-      <RuleStatusDropdownSandbox />
-      <RuleTagFilterSandbox />
-      <RuleStatusFilterSandbox />
-      <RuleTagBadgeSandbox />
-      <RulesListSandbox />
-      <RuleEventLogListSandbox />
-      <RulesListNotifyBadgeSandbox />
-    </>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export
-export { InternalShareableComponentsSandbox as default };

x-pack/plugins/triggers_actions_ui/public/common/get_experimental_features.test.tsx

@@ -20,7 +20,6 @@ describe('getIsExperimentalFeatureEnabled', () => {
         rulesDetailLogs: true,
         ruleTagFilter: true,
         ruleStatusFilter: true,
-        internalShareableComponentsSandbox: true,
       },
     });
 
@@ -36,10 +35,6 @@ describe('getIsExperimentalFeatureEnabled', () => {
 
     expect(result).toEqual(true);
 
-    result = getIsExperimentalFeatureEnabled('internalShareableComponentsSandbox');
-
-    expect(result).toEqual(true);
-
     result = getIsExperimentalFeatureEnabled('ruleTagFilter');
 
     expect(result).toEqual(true);

x-pack/plugins/triggers_actions_ui/public/index.ts

@@ -16,7 +16,9 @@ export type {
   Rule,
   RuleType,
   RuleTypeModel,
+  RuleStatusFilterProps,
   RuleStatus,
+  RuleTableItem,
   ActionType,
   ActionTypeRegistryContract,
   RuleTypeRegistryContract,

x-pack/test/examples/config.ts

@@ -39,6 +39,7 @@ export default async function ({ readConfigFile }: FtrConfigProviderContext) {
       require.resolve('./embedded_lens'),
       require.resolve('./reporting_examples'),
       require.resolve('./screenshotting'),
+      require.resolve('./triggers_actions_ui_examples'),
     ],
 
     kbnTestServer: {

x-pack/test/examples/triggers_actions_ui_examples/index.ts

@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+import { FtrProviderContext } from '../../../../test/functional/ftr_provider_context';
+
+// eslint-disable-next-line import/no-default-export
+export default ({ loadTestFile, getService }: FtrProviderContext) => {
+  describe('Triggers Actions UI Example', function () {
+    loadTestFile(require.resolve('./rule_status_dropdown'));
+    loadTestFile(require.resolve('./rule_tag_filter'));
+    loadTestFile(require.resolve('./rule_status_filter'));
+    loadTestFile(require.resolve('./rule_tag_badge'));
+    loadTestFile(require.resolve('./rule_event_log_list'));
+    loadTestFile(require.resolve('./rules_list'));
+  });
+};

x-pack/test/examples/triggers_actions_ui_examples/rule_event_log_list.ts

@@ -6,20 +6,18 @@
  */
 
 import expect from '@kbn/expect';
-import { FtrProviderContext } from '../../ftr_provider_context';
+import { FtrProviderContext } from '../../../../test/functional/ftr_provider_context';
 
+// eslint-disable-next-line import/no-default-export
 export default ({ getPageObjects, getService }: FtrProviderContext) => {
   const testSubjects = getService('testSubjects');
-  const PageObjects = getPageObjects(['common', 'triggersActionsUI', 'header']);
+  const PageObjects = getPageObjects(['common']);
   const esArchiver = getService('esArchiver');
 
   describe('Rule event log list', function () {
     before(async () => {
       await esArchiver.load('x-pack/test/functional/es_archives/observability/alerts');
-      await PageObjects.common.navigateToUrlWithBrowserHistory(
+      await PageObjects.common.navigateToApp('triggersActionsUiExample/rule_event_log_list');
-        'triggersActions',
-        '/__components_sandbox'
-      );
     });
     after(async () => {
       await esArchiver.unload('x-pack/test/functional/es_archives/observability/alerts');

x-pack/test/examples/triggers_actions_ui_examples/rule_status_dropdown.ts

@@ -6,22 +6,18 @@
  */
 
 import expect from '@kbn/expect';
-import { FtrProviderContext } from '../../ftr_provider_context';
+import { FtrProviderContext } from '../../../../test/functional/ftr_provider_context';
 
+// eslint-disable-next-line import/no-default-export
 export default ({ getPageObjects, getService }: FtrProviderContext) => {
   const testSubjects = getService('testSubjects');
-  const PageObjects = getPageObjects(['common', 'triggersActionsUI', 'header']);
+  const PageObjects = getPageObjects(['common']);
-  // const retry = getService('retry');
   const esArchiver = getService('esArchiver');
-  // const find = getService('find');
 
   describe('Rule status dropdown', function () {
     before(async () => {
       await esArchiver.load('x-pack/test/functional/es_archives/observability/alerts');
-      await PageObjects.common.navigateToUrlWithBrowserHistory(
+      await PageObjects.common.navigateToApp('triggersActionsUiExample/rule_status_dropdown');
-        'triggersActions',
-        '/__components_sandbox'
-      );
     });
     after(async () => {
       await esArchiver.unload('x-pack/test/functional/es_archives/observability/alerts');

x-pack/test/examples/triggers_actions_ui_examples/rule_status_filter.ts

@@ -6,21 +6,18 @@
  */
 
 import expect from '@kbn/expect';
-import { FtrProviderContext } from '../../ftr_provider_context';
+import { FtrProviderContext } from '../../../../test/functional/ftr_provider_context';
 
+// eslint-disable-next-line import/no-default-export
 export default ({ getPageObjects, getService }: FtrProviderContext) => {
   const testSubjects = getService('testSubjects');
-  const PageObjects = getPageObjects(['common', 'triggersActionsUI', 'header']);
+  const PageObjects = getPageObjects(['common']);
   const esArchiver = getService('esArchiver');
 
-  // FLAKY: https://github.com/elastic/kibana/issues/132736
+  describe('Rule status filter', () => {
-  describe.skip('Rule status filter', () => {
     before(async () => {
       await esArchiver.load('x-pack/test/functional/es_archives/observability/alerts');
-      await PageObjects.common.navigateToUrlWithBrowserHistory(
+      await PageObjects.common.navigateToApp('triggersActionsUiExample/rule_status_filter');
-        'triggersActions',
-        '/__components_sandbox'
-      );
     });
     after(async () => {
       await esArchiver.unload('x-pack/test/functional/es_archives/observability/alerts');

x-pack/test/examples/triggers_actions_ui_examples/rule_tag_badge.ts

@@ -6,21 +6,18 @@
  */
 
 import expect from '@kbn/expect';
-import { FtrProviderContext } from '../../ftr_provider_context';
+import { FtrProviderContext } from '../../../../test/functional/ftr_provider_context';
 
+// eslint-disable-next-line import/no-default-export
 export default ({ getPageObjects, getService }: FtrProviderContext) => {
   const testSubjects = getService('testSubjects');
-  const PageObjects = getPageObjects(['common', 'triggersActionsUI', 'header']);
+  const PageObjects = getPageObjects(['common']);
   const esArchiver = getService('esArchiver');
 
-  // Failing: See https://github.com/elastic/kibana/issues/132739
+  describe('Rule tag badge', () => {
-  describe.skip('Rule tag badge', () => {
     before(async () => {
       await esArchiver.load('x-pack/test/functional/es_archives/observability/alerts');
-      await PageObjects.common.navigateToUrlWithBrowserHistory(
+      await PageObjects.common.navigateToApp('triggersActionsUiExample/rule_tag_badge');
-        'triggersActions',
-        '/__components_sandbox'
-      );
     });
     after(async () => {
       await esArchiver.unload('x-pack/test/functional/es_archives/observability/alerts');

x-pack/test/examples/triggers_actions_ui_examples/rule_tag_filter.ts

@@ -6,20 +6,18 @@
  */
 
 import expect from '@kbn/expect';
-import { FtrProviderContext } from '../../ftr_provider_context';
+import { FtrProviderContext } from '../../../../test/functional/ftr_provider_context';
 
+// eslint-disable-next-line import/no-default-export
 export default ({ getPageObjects, getService }: FtrProviderContext) => {
   const testSubjects = getService('testSubjects');
-  const PageObjects = getPageObjects(['common', 'triggersActionsUI', 'header']);
+  const PageObjects = getPageObjects(['common']);
   const esArchiver = getService('esArchiver');
 
   describe('Rule tag filter', () => {
     before(async () => {
       await esArchiver.load('x-pack/test/functional/es_archives/observability/alerts');
-      await PageObjects.common.navigateToUrlWithBrowserHistory(
+      await PageObjects.common.navigateToApp('triggersActionsUiExample/rule_tag_filter');
-        'triggersActions',
-        '/__components_sandbox'
-      );
     });
     after(async () => {
       await esArchiver.unload('x-pack/test/functional/es_archives/observability/alerts');

x-pack/test/examples/triggers_actions_ui_examples/rules_list.ts

@@ -6,20 +6,18 @@
  */
 
 import expect from '@kbn/expect';
-import { FtrProviderContext } from '../../ftr_provider_context';
+import { FtrProviderContext } from '../../../../test/functional/ftr_provider_context';
 
+// eslint-disable-next-line import/no-default-export
 export default ({ getPageObjects, getService }: FtrProviderContext) => {
   const testSubjects = getService('testSubjects');
-  const PageObjects = getPageObjects(['common', 'triggersActionsUI', 'header']);
+  const PageObjects = getPageObjects(['common']);
   const esArchiver = getService('esArchiver');
 
   describe('Rules list', () => {
     before(async () => {
       await esArchiver.load('x-pack/test/functional/es_archives/observability/alerts');
-      await PageObjects.common.navigateToUrlWithBrowserHistory(
+      await PageObjects.common.navigateToApp('triggersActionsUiExample/rules_list');
-        'triggersActions',
-        '/__components_sandbox'
-      );
     });
     after(async () => {
       await esArchiver.unload('x-pack/test/functional/es_archives/observability/alerts');

x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/index.ts

@@ -15,11 +15,5 @@ export default ({ loadTestFile, getService }: FtrProviderContext) => {
     loadTestFile(require.resolve('./details'));
     loadTestFile(require.resolve('./connectors'));
     loadTestFile(require.resolve('./alerts_table'));
-    loadTestFile(require.resolve('./rule_status_dropdown'));
-    loadTestFile(require.resolve('./rule_tag_filter'));
-    loadTestFile(require.resolve('./rule_status_filter'));
-    loadTestFile(require.resolve('./rule_tag_badge'));
-    loadTestFile(require.resolve('./rule_event_log_list'));
-    loadTestFile(require.resolve('./rules_list'));
   });
 };

x-pack/test/functional_with_es_ssl/config.ts

@@ -76,7 +76,6 @@ export default async function ({ readConfigFile }: FtrConfigProviderContext) {
         `--plugin-path=${join(__dirname, 'fixtures', 'plugins', 'cases')}`,
         `--xpack.trigger_actions_ui.enableExperimental=${JSON.stringify([
           'internalAlertsTable',
-          'internalShareableComponentsSandbox',
           'ruleTagFilter',
           'ruleStatusFilter',
         ])}`,