upcoming: [DPS-34041] Add actions in Destinations list (linode#12749)

* upcoming: [DPS-34041] Add actions in Destinations list

* upcoming: [DPS-34041] CR changes 1

---------

Co-authored-by: Mariah Jacobs <[email protected]>

Author: mduda-akamai

packages/api-v4/.changeset/pr-12749-upcoming-features-1756101406751.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Upcoming Features
+---
+
+DELETE, PUT API endpoints for Destinations ([#12749](https://github.com/linode/manager/pull/12749))

packages/api-v4/src/account/types.ts

@@ -344,6 +344,8 @@ export const EventActionKeys = [
   'database_migrate',
   'database_upgrade',
   'destination_create',
+  'destination_delete',
+  'destination_update',
   'disk_create',
   'disk_delete',
   'disk_duplicate',

packages/api-v4/src/datastream/destinations.ts

@@ -1,4 +1,4 @@
-import { createDestinationSchema } from '@linode/validation';
+import { destinationSchema } from '@linode/validation';
 
 import { BETA_API_ROOT } from '../constants';
 import Request, {
@@ -10,7 +10,11 @@ import Request, {
 } from '../request';
 
 import type { Filter, ResourcePage as Page, Params } from '../types';
-import type { CreateDestinationPayload, Destination } from './types';
+import type {
+  CreateDestinationPayload,
+  Destination,
+  UpdateDestinationPayload,
+} from './types';
 
 /**
  * Returns all the information about a specified Destination.
@@ -45,7 +49,38 @@ export const getDestinations = (params?: Params, filter?: Filter) =>
  */
 export const createDestination = (data: CreateDestinationPayload) =>
   Request<Destination>(
-    setData(data, createDestinationSchema),
+    setData(data, destinationSchema),
     setURL(`${BETA_API_ROOT}/monitor/streams/destinations`),
     setMethod('POST'),
   );
+
+/**
+ * Updates a Destination.
+ *
+ * @param destinationId { number } The ID of the Destination.
+ * @param data { object } Options for type, label, etc.
+ */
+export const updateDestination = (
+  destinationId: number,
+  data: UpdateDestinationPayload,
+) =>
+  Request<Destination>(
+    setData(data, destinationSchema),
+    setURL(
+      `${BETA_API_ROOT}/monitor/streams/destinations/${encodeURIComponent(destinationId)}`,
+    ),
+    setMethod('PUT'),
+  );
+
+/**
+ * Deletes a Destination.
+ *
+ * @param destinationId { number } The ID of the Destination.
+ */
+export const deleteDestination = (destinationId: number) =>
+  Request<{}>(
+    setURL(
+      `${BETA_API_ROOT}/monitor/streams/destinations/${encodeURIComponent(destinationId)}`,
+    ),
+    setMethod('DELETE'),
+  );

packages/api-v4/src/datastream/types.ts

@@ -126,3 +126,10 @@ export interface CreateDestinationPayload {
   label: string;
   type: DestinationType;
 }
+
+export type UpdateDestinationPayload = CreateDestinationPayload;
+
+export interface UpdateDestinationPayloadWithId
+  extends UpdateDestinationPayload {
+  id: number;
+}

packages/manager/.changeset/pr-12749-upcoming-features-1756101457443.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+DataStreams: add actions with handlers in Destinations list, add Edit Destination component ([#12749](https://github.com/linode/manager/pull/12749))

packages/manager/src/features/DataStream/Destinations/DestinationActionMenu.test.tsx

@@ -0,0 +1,29 @@
+import { screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import * as React from 'react';
+
+import { destinationFactory } from 'src/factories/datastream';
+import { DestinationActionMenu } from 'src/features/DataStream/Destinations/DestinationActionMenu';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+const fakeHandler = vi.fn();
+
+describe('DestinationActionMenu', () => {
+  it('should include proper Stream actions', async () => {
+    renderWithTheme(
+      <DestinationActionMenu
+        destination={destinationFactory.build()}
+        onDelete={fakeHandler}
+        onEdit={fakeHandler}
+      />
+    );
+
+    const actionMenuButton = screen.queryByLabelText(/^Action menu for/)!;
+
+    await userEvent.click(actionMenuButton);
+
+    for (const action of ['Edit', 'Delete']) {
+      expect(screen.getByText(action)).toBeVisible();
+    }
+  });
+});

packages/manager/src/features/DataStream/Destinations/DestinationActionMenu.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+import { ActionMenu } from 'src/components/ActionMenu/ActionMenu';
+
+import type { Destination } from '@linode/api-v4';
+
+export interface DestinationHandlers {
+  onDelete: (destination: Destination) => void;
+  onEdit: (destination: Destination) => void;
+}
+
+interface DestinationActionMenuProps extends DestinationHandlers {
+  destination: Destination;
+}
+
+export const DestinationActionMenu = (props: DestinationActionMenuProps) => {
+  const { destination, onDelete, onEdit } = props;
+
+  const menuActions = [
+    {
+      onClick: () => {
+        onEdit(destination);
+      },
+      title: 'Edit',
+    },
+    {
+      onClick: () => {
+        onDelete(destination);
+      },
+      title: 'Delete',
+    },
+  ];
+
+  return (
+    <ActionMenu
+      actionsList={menuActions}
+      ariaLabel={`Action menu for Destination ${destination.label}`}
+    />
+  );
+};

packages/manager/src/features/DataStream/Destinations/DestinationCreate/DestinationCreate.tsx

@@ -0,0 +1,62 @@
+import { yupResolver } from '@hookform/resolvers/yup';
+import { destinationType } from '@linode/api-v4';
+import { useCreateDestinationMutation } from '@linode/queries';
+import { destinationSchema } from '@linode/validation';
+import { useNavigate } from '@tanstack/react-router';
+import * as React from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+
+import { DocumentTitleSegment } from 'src/components/DocumentTitle';
+import { LandingHeader } from 'src/components/LandingHeader';
+import { DestinationForm } from 'src/features/DataStream/Destinations/DestinationForm/DestinationForm';
+
+import type { LandingHeaderProps } from 'src/components/LandingHeader';
+import type { DestinationFormType } from 'src/features/DataStream/Shared/types';
+
+export const DestinationCreate = () => {
+  const { mutateAsync: createDestination } = useCreateDestinationMutation();
+  const navigate = useNavigate();
+
+  const landingHeaderProps: LandingHeaderProps = {
+    breadcrumbProps: {
+      pathname: '/datastream/destinations/create',
+      crumbOverrides: [
+        {
+          label: 'DataStream',
+          linkTo: '/datastream/destinations',
+          position: 1,
+        },
+      ],
+    },
+    removeCrumbX: 2,
+    title: 'Create Destination',
+  };
+
+  const form = useForm<DestinationFormType>({
+    defaultValues: {
+      type: destinationType.LinodeObjectStorage,
+      details: {
+        region: '',
+      },
+    },
+    mode: 'onBlur',
+    resolver: yupResolver(destinationSchema),
+  });
+
+  const onSubmit = () => {
+    const payload = form.getValues();
+    createDestination(payload).then(() => {
+      navigate({ to: '/datastream/destinations' });
+    });
+  };
+
+  return (
+    <>
+      <DocumentTitleSegment segment="Create Destination" />
+      <LandingHeader {...landingHeaderProps} />
+      <FormProvider {...form}>
+        <DestinationForm mode="create" onSubmit={onSubmit} />
+      </FormProvider>
+    </>
+  );
+};