[RAM] Make RuleStatusDropdown shareable (elastic#130205)

* Add shareable e dropdown and move snooze interval to localstorage

* Add internal components sandbox page and status dropdown test

* Remove components sandbox tab

* Fix typecheck

* Fix typechecks and tests

* Attempt to deflake tests

* Reenable previousSnoozeInterval from props and prefix storage key

* Export missing apis

* Fix tooltip for indefinite snooze

* Attempt to deflake functional test

* Modularize Sandbox

* Up triggersActionsUi package limit

packages/kbn-optimizer/limits.yml

@@ -56,7 +56,7 @@ pageLoadAssetSize:
   telemetry: 51957
   telemetryManagementSection: 38586
   transform: 41007
-  triggersActionsUi: 102400
+  triggersActionsUi: 103400
   upgradeAssistant: 81241
   uptime: 40825
   urlForwarding: 32579

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

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

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

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

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

@@ -13,13 +13,14 @@ 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';
+export type Section = 'connectors' | 'rules' | 'alerts' | '__components_sandbox';
 
 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,7 +11,13 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiSpacer, EuiButtonEmpty, EuiPageHeader } from '@elastic/eui';
 
 import { getIsExperimentalFeatureEnabled } from '../common/get_experimental_features';
-import { Section, routeToConnectors, routeToRules, routeToInternalAlerts } from './constants';
+import {
+  Section,
+  routeToConnectors,
+  routeToRules,
+  routeToInternalAlerts,
+  routeToInternalShareableComponentsSandbox,
+} from './constants';
 import { getAlertingSectionBreadcrumb } from './lib/breadcrumb';
 import { getCurrentDocTitle } from './lib/doc_title';
 import { hasShowActionsCapability } from './lib/capabilities';
@@ -26,6 +32,9 @@ 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;
@@ -45,6 +54,9 @@ export const TriggersActionsUIHome: React.FunctionComponent<RouteComponentProps<
     docLinks,
   } = useKibana().services;
   const isInternalAlertsTableEnabled = getIsExperimentalFeatureEnabled('internalAlertsTable');
+  const isInternalShareableComponentsSandboxEnabled = getIsExperimentalFeatureEnabled(
+    'internalShareableComponentsSandbox'
+  );
 
   const canShowActions = hasShowActionsCapability(capabilities);
   const tabs: Array<{
@@ -150,6 +162,13 @@ 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/rule_status_dropdown_sandbox.tsx

@@ -0,0 +1,44 @@
+/*
+ * 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, { useState } from 'react';
+import { getRuleStatusDropdownLazy } from '../../../common/get_rule_status_dropdown';
+
+export const RuleStatusDropdownSandbox: React.FC<{}> = () => {
+  const [enabled, setEnabled] = useState(true);
+  const [snoozeEndTime, setSnoozeEndTime] = useState<Date | null>(null);
+  const [muteAll, setMuteAll] = useState(false);
+
+  return getRuleStatusDropdownLazy({
+    rule: {
+      enabled,
+      snoozeEndTime,
+      muteAll,
+    },
+    enableRule: async () => {
+      setEnabled(true);
+      setMuteAll(false);
+      setSnoozeEndTime(null);
+    },
+    disableRule: async () => setEnabled(false),
+    snoozeRule: async (time) => {
+      if (time === -1) {
+        setSnoozeEndTime(null);
+        setMuteAll(true);
+      } else {
+        setSnoozeEndTime(new Date(time));
+        setMuteAll(false);
+      }
+    },
+    unsnoozeRule: async () => {
+      setMuteAll(false);
+      setSnoozeEndTime(null);
+    },
+    onRuleChanged: () => {},
+    isEditable: true,
+  });
+};

x-pack/plugins/triggers_actions_ui/public/application/internal/shareable_components_sandbox/shareable_components_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 { RuleStatusDropdownSandbox } from './rule_status_dropdown_sandbox';
+
+export const InternalShareableComponentsSandbox: React.FC<{}> = () => {
+  return (
+    <>
+      <RuleStatusDropdownSandbox />
+    </>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export { InternalShareableComponentsSandbox as default };

x-pack/plugins/triggers_actions_ui/public/application/sections/index.tsx

@@ -28,3 +28,7 @@ export const ConnectorEditFlyout = suspendedComponentWithProps(
 export const ActionForm = suspendedComponentWithProps(
   lazy(() => import('./action_connector_form/action_form'))
 );
+
+export const RuleStatusDropdown = suspendedComponentWithProps(
+  lazy(() => import('./rules_list/components/rule_status_dropdown'))
+);

x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_details.tsx

@@ -285,11 +285,10 @@ export const RuleDetails: React.FunctionComponent<RuleDetailsProps> = ({
                       await snoozeRule(rule, snoozeEndTime)
                     }
                     unsnoozeRule={async () => await unsnoozeRule(rule)}
-                    item={rule as RuleTableItem}
+                    rule={rule as RuleTableItem}
                     onRuleChanged={requestRefresh}
                     direction="row"
                     isEditable={hasEditButton}
-                    previousSnoozeInterval={null}
                   />
                 </EuiFlexItem>
               </EuiFlexGroup>

x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_status_dropdown.test.tsx

@@ -23,8 +23,7 @@ describe('RuleStatusDropdown', () => {
     snoozeRule,
     unsnoozeRule,
     isEditable: true,
-    previousSnoozeInterval: null,
-    item: {
+    rule: {
       id: '1',
       name: 'test rule',
       tags: ['tag1'],
@@ -53,7 +52,7 @@ describe('RuleStatusDropdown', () => {
       index: 0,
       updatedAt: new Date('2020-08-20T19:23:38Z'),
       snoozeEndTime: null,
-    },
+    } as ComponentOpts['rule'],
     onRuleChanged: jest.fn(),
   };
 
@@ -75,7 +74,7 @@ describe('RuleStatusDropdown', () => {
 
   test('renders status control as disabled when rule is disabled', () => {
     const wrapper = mountWithIntl(
-      <RuleStatusDropdown {...{ ...props, item: { ...props.item, enabled: false } }} />
+      <RuleStatusDropdown {...{ ...props, rule: { ...props.rule, enabled: false } }} />
     );
     expect(wrapper.find('[data-test-subj="statusDropdown"]').first().props().title).toBe(
       'Disabled'
@@ -87,7 +86,7 @@ describe('RuleStatusDropdown', () => {
 
     const wrapper = mountWithIntl(
       <RuleStatusDropdown
-        {...{ ...props, item: { ...props.item, snoozeEndTime: SNOOZE_END_TIME } }}
+        {...{ ...props, rule: { ...props.rule, snoozeEndTime: SNOOZE_END_TIME } }}
       />
     );
     expect(wrapper.find('[data-test-subj="statusDropdown"]').first().props().title).toBe('Snoozed');
@@ -98,7 +97,7 @@ describe('RuleStatusDropdown', () => {
     jest.spyOn(global.Date, 'now').mockImplementation(() => new Date(NOW_STRING).valueOf());
 
     const wrapper = mountWithIntl(
-      <RuleStatusDropdown {...{ ...props, item: { ...props.item, muteAll: true } }} />
+      <RuleStatusDropdown {...{ ...props, rule: { ...props.rule, muteAll: true } }} />
     );
     expect(wrapper.find('[data-test-subj="statusDropdown"]').first().props().title).toBe('Snoozed');
     expect(wrapper.find('[data-test-subj="remainingSnoozeTime"]').first().text()).toBe(
@@ -109,7 +108,7 @@ describe('RuleStatusDropdown', () => {
   test('renders status control as disabled when rule is snoozed but also disabled', () => {
     const wrapper = mountWithIntl(
       <RuleStatusDropdown
-        {...{ ...props, item: { ...props.item, enabled: false, snoozeEndTime: SNOOZE_END_TIME } }}
+        {...{ ...props, rule: { ...props.rule, enabled: false, snoozeEndTime: SNOOZE_END_TIME } }}
       />
     );
     expect(wrapper.find('[data-test-subj="statusDropdown"]').first().props().title).toBe(
@@ -122,7 +121,7 @@ describe('RuleStatusDropdown', () => {
       <RuleStatusDropdown
         {...{
           ...props,
-          item: { ...props.item, snoozeEndTime: SNOOZE_END_TIME },
+          rule: { ...props.rule, snoozeEndTime: SNOOZE_END_TIME },
         }}
         isEditable={false}
       />