[Alerting v2] foundational rule list

packages/kbn-optimizer/limits.yml

@@ -6,7 +6,7 @@ pageLoadAssetSize:
   aiAssistantManagementSelection: 13590
   aiops: 15227
   alerting: 22371
-  alertingVTwo: 362794
+  alertingVTwo: 415712
   apm: 25363
   apmSourcesAccess: 2278
   automaticImport: 12162

x-pack/platform/plugins/shared/alerting_v2/public/components/app.tsx

@@ -7,19 +7,19 @@
 
 import React from 'react';
 import { Route, Routes } from '@kbn/shared-ux-router';
-import { CreateRulePage } from './create_rule_page';
-import { RulesListPage } from './rules_list_page';
+import { RuleFormPage } from '../pages/rule_form_page/rule_form_page';
+import { RulesListPage } from '../pages/rules_list_page/rules_list_page';
 import { ListNotificationPoliciesPage } from '../pages/list_notification_policies_page/list_notification_policies_page';
 import { NotificationPolicyFormPage } from '../pages/notification_policy_form_page/notification_policy_form_page';
 
 export const App = () => {
   return (
     <Routes>
       <Route path="/edit/:id">
-        <CreateRulePage />
+        <RuleFormPage />
       </Route>
       <Route path="/create">
-        <CreateRulePage />
+        <RuleFormPage />
       </Route>
       <Route path="/notification_policies/create">
         <NotificationPolicyFormPage />

x-pack/platform/plugins/shared/alerting_v2/public/components/rule/delete_confirmation_modal.test.tsx

@@ -0,0 +1,60 @@
+/*
+ * 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 { render, screen, fireEvent } from '@testing-library/react';
+import { I18nProvider } from '@kbn/i18n-react';
+import { DeleteConfirmationModal } from './delete_confirmation_modal';
+
+const renderModal = (props: Partial<React.ComponentProps<typeof DeleteConfirmationModal>> = {}) => {
+  const defaultProps = {
+    ruleName: 'Test Rule',
+    onCancel: jest.fn(),
+    onConfirm: jest.fn(),
+    isLoading: false,
+    ...props,
+  };
+
+  return render(
+    <I18nProvider>
+      <DeleteConfirmationModal {...defaultProps} />
+    </I18nProvider>
+  );
+};
+
+describe('DeleteConfirmationModal', () => {
+  it('renders the rule name in the confirmation message', () => {
+    renderModal({ ruleName: 'My Important Rule' });
+
+    expect(screen.getByText(/My Important Rule/)).toBeInTheDocument();
+  });
+
+  it('calls onCancel when the cancel button is clicked', () => {
+    const onCancel = jest.fn();
+    renderModal({ onCancel });
+
+    fireEvent.click(screen.getByText('Cancel'));
+
+    expect(onCancel).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onConfirm when the confirm button is clicked', () => {
+    const onConfirm = jest.fn();
+    renderModal({ onConfirm });
+
+    fireEvent.click(screen.getByText('Delete'));
+
+    expect(onConfirm).toHaveBeenCalledTimes(1);
+  });
+
+  it('shows loading state on confirm button', () => {
+    renderModal({ isLoading: true });
+
+    const confirmButton = screen.getByTestId('confirmModalConfirmButton');
+    expect(confirmButton).toBeDisabled();
+  });
+});

x-pack/platform/plugins/shared/alerting_v2/public/components/rule/delete_confirmation_modal.tsx

@@ -0,0 +1,54 @@
+/*
+ * 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 { EuiConfirmModal, useGeneratedHtmlId } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+interface DeleteConfirmationModalProps {
+  ruleName: string;
+  onCancel: () => void;
+  onConfirm: () => void;
+  isLoading: boolean;
+}
+
+export const DeleteConfirmationModal = ({
+  ruleName,
+  onCancel,
+  onConfirm,
+  isLoading,
+}: DeleteConfirmationModalProps) => {
+  const modalTitleId = useGeneratedHtmlId();
+
+  return (
+    <EuiConfirmModal
+      aria-labelledby={modalTitleId}
+      titleProps={{ id: modalTitleId }}
+      title={i18n.translate('xpack.alertingV2.deleteConfirmationModal.title', {
+        defaultMessage: 'Delete rule',
+      })}
+      onCancel={onCancel}
+      onConfirm={onConfirm}
+      cancelButtonText={i18n.translate('xpack.alertingV2.deleteConfirmationModal.cancelButton', {
+        defaultMessage: 'Cancel',
+      })}
+      confirmButtonText={i18n.translate('xpack.alertingV2.deleteConfirmationModal.confirmButton', {
+        defaultMessage: 'Delete',
+      })}
+      buttonColor="danger"
+      isLoading={isLoading}
+      data-test-subj="deleteRuleConfirmationModal"
+    >
+      <FormattedMessage
+        id="xpack.alertingV2.deleteConfirmationModal.body"
+        defaultMessage='Are you sure you want to delete the rule "{ruleName}"? This action cannot be undone.'
+        values={{ ruleName }}
+      />
+    </EuiConfirmModal>
+  );
+};

x-pack/platform/plugins/shared/alerting_v2/public/constants.ts

@@ -14,6 +14,9 @@ export const INTERNAL_ALERTING_V2_NOTIFICATION_POLICY_API_PATH =
   '/internal/alerting/v2/notification_policies' as const;
 
 export const paths = {
+  ruleCreate: `${ALERTING_V2_BASE_PATH}/create`,
+  ruleEdit: (id: string) => `${ALERTING_V2_BASE_PATH}/edit/${encodeURIComponent(id)}`,
+  ruleList: ALERTING_V2_BASE_PATH,
   notificationPolicyCreate: `${ALERTING_V2_NOTIFICATION_POLICIES_PATH}/create`,
   notificationPolicyEdit: (id: string) =>
     `${ALERTING_V2_NOTIFICATION_POLICIES_PATH}/edit/${encodeURIComponent(id)}`,