upcoming: [DI-28503] - Add filter components for notification channel create flow (#13217)

* upcoming: [DI-28503] - Add components for notification channel create flow

* upcoming: [DI-28503] - Add changeset

* upcoming: [DI-28503] - PR comment

* upcoming: [DI-28503] - Prefer complete user obj in recipient options, address comments

Author: ankita-akamai

packages/manager/.changeset/pr-13217-upcoming-features-1766329412234.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+CloudPulse-Alerts: Add components for create notification channel flow ([#13217](https://github.com/linode/manager/pull/13217))

packages/manager/src/featureFlags.ts

@@ -156,6 +156,7 @@ interface AclpAlerting {
   alertDefinitions: boolean;
   beta: boolean;
   editDisabledStatuses?: AlertStatusType[];
+  maxEmailChannelRecipients?: number;
   notificationChannels: boolean;
   recentActivity: boolean;
   systemChannelSupportedServices?: CloudPulseServiceType[]; // linode, dbaas, etc.

packages/manager/src/features/CloudPulse/Alerts/NotificationChannels/CreateChannel/NotificationChannelTypeSelect.test.tsx

@@ -0,0 +1,97 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import * as React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { channelTypeOptions } from '../../constants';
+import { NotificationChannelTypeSelect } from './NotificationChannelTypeSelect';
+
+import type { NotificationChannelTypeSelectProps } from './NotificationChannelTypeSelect';
+
+const mockHandleChannelTypeChange = vi.fn();
+const mockOnBlur = vi.fn();
+
+const props: NotificationChannelTypeSelectProps = {
+  handleChannelTypeChange: mockHandleChannelTypeChange,
+  onBlur: mockOnBlur,
+  options: channelTypeOptions,
+  value: null,
+};
+
+describe('NotificationChannelTypeSelect component tests', () => {
+  it('should render the Autocomplete component', () => {
+    renderWithTheme(<NotificationChannelTypeSelect {...props} />);
+
+    expect(screen.getByTestId('channel-type-select')).toBeVisible();
+    expect(screen.getByText('Type')).toBeVisible();
+    expect(screen.getByPlaceholderText('Select a Channel Type')).toBeVisible();
+  });
+
+  it('should render channel type options when opened and able to select an option', async () => {
+    renderWithTheme(<NotificationChannelTypeSelect {...props} />);
+
+    await userEvent.click(screen.getByRole('button', { name: 'Open' }));
+    expect(await screen.findByRole('option', { name: 'Email' })).toBeVisible();
+
+    // select the email option
+    await userEvent.click(await screen.findByRole('option', { name: 'Email' }));
+    expect(screen.getByRole('combobox')).toHaveAttribute('value', 'Email');
+
+    // verify handleChannelTypeChange is called with the correct value
+    expect(mockHandleChannelTypeChange).toHaveBeenCalledWith('email');
+  });
+
+  it('should be able to clear the selected channel type', async () => {
+    renderWithTheme(<NotificationChannelTypeSelect {...props} value="email" />);
+
+    // Verify initial value is set
+    expect(screen.getByRole('combobox')).toHaveAttribute('value', 'Email');
+
+    // Click the clear button
+    const clearButton = screen.getByLabelText('Clear');
+    await userEvent.click(clearButton);
+
+    // verify handleChannelTypeChange is called with null
+    expect(screen.getByRole('combobox')).toHaveAttribute('value', '');
+    expect(mockHandleChannelTypeChange).toHaveBeenCalledWith(null);
+  });
+
+  it('should display error message when error prop is provided', () => {
+    const errorMessage = 'This field is required';
+
+    renderWithTheme(
+      <NotificationChannelTypeSelect {...props} error={errorMessage} />
+    );
+
+    expect(screen.getByText(errorMessage)).toBeVisible();
+  });
+
+  it('should call onBlur when the field loses focus', async () => {
+    renderWithTheme(<NotificationChannelTypeSelect {...props} />);
+
+    const combobox = screen.getByRole('combobox');
+    await userEvent.click(combobox);
+    await userEvent.tab();
+
+    expect(mockOnBlur).toHaveBeenCalled();
+  });
+
+  it('should handle empty options array', async () => {
+    renderWithTheme(<NotificationChannelTypeSelect {...props} options={[]} />);
+
+    expect(screen.getByTestId('channel-type-select')).toBeVisible();
+    expect(screen.getByPlaceholderText('Select a Channel Type')).toBeVisible();
+
+    await userEvent.click(screen.getByRole('button', { name: 'Open' }));
+    expect(
+      screen.getByText('You have no options to choose from')
+    ).toBeVisible();
+  });
+
+  it('should render with null value', async () => {
+    renderWithTheme(<NotificationChannelTypeSelect {...props} value={null} />);
+
+    expect(screen.getByRole('combobox')).toHaveAttribute('value', '');
+  });
+});

packages/manager/src/features/CloudPulse/Alerts/NotificationChannels/CreateChannel/NotificationChannelTypeSelect.tsx

@@ -0,0 +1,54 @@
+import { Autocomplete } from '@linode/ui';
+import React from 'react';
+
+import type { Item } from '../../constants';
+import type { ChannelType } from '@linode/api-v4';
+
+export interface NotificationChannelTypeSelectProps {
+  /**
+   * Error text to display when the field has a validation error
+   */
+  error?: string;
+  /**
+   * Function to handle the change of the channel type
+   */
+  handleChannelTypeChange: (value: ChannelType | null) => void;
+  /**
+   * Function to handle the blur event
+   */
+  onBlur?: () => void;
+  /**
+   * Options for the channel type select
+   */
+  options: Item<string, ChannelType>[];
+  /**
+   * Value of the channel type in the form
+   */
+  value: ChannelType | null;
+}
+
+export const NotificationChannelTypeSelect = React.memo(
+  (props: NotificationChannelTypeSelectProps) => {
+    const { error, handleChannelTypeChange, value, options, onBlur } = props;
+
+    return (
+      <Autocomplete
+        data-testid="channel-type-select"
+        errorText={error}
+        label="Type"
+        onBlur={onBlur}
+        onChange={(_, selected, reason) => {
+          if (selected) {
+            handleChannelTypeChange(selected.value);
+          }
+          if (reason === 'clear') {
+            handleChannelTypeChange(null);
+          }
+        }}
+        options={options}
+        placeholder="Select a Channel Type"
+        value={options.find((option) => option.value === value) ?? null}
+      />
+    );
+  }
+);