[AN-247] Edit method functionality

src/libs/ajax/methods/Methods.ts

@@ -4,6 +4,7 @@ import * as qs from 'qs';
 import { authOpts } from 'src/auth/auth-session';
 import { fetchAgora, fetchOrchestration, fetchRawls } from 'src/libs/ajax/ajax-common';
 import {
+  CreateSnapshotRequest,
   MethodConfigACL,
   MethodDefinition,
   MethodQuery,
@@ -60,6 +61,17 @@ export const Methods = (signal?: AbortSignal) => ({
         return res.json();
       },
 
+      createSnapshot: async (
+        payload: CreateSnapshotRequest,
+        redactPreviousSnapshot: boolean
+      ): Promise<MethodResponse> => {
+        const res = await fetchOrchestration(
+          `api/${root}?redact=${redactPreviousSnapshot}`,
+          _.mergeAll([authOpts(), jsonBody(payload), { signal, method: 'POST' }])
+        );
+        return res.json();
+      },
+
       configs: async () => {
         const res = await fetchAgora(`${root}/configurations`, _.merge(authOpts(), { signal }));
         return res.json();
@@ -78,11 +90,6 @@ export const Methods = (signal?: AbortSignal) => ({
         return res.json();
       },
 
-      allConfigs: async () => {
-        const res = await fetchAgora(`methods/${namespace}/${name}/configurations`, _.merge(authOpts(), { signal }));
-        return res.json();
-      },
-
       toWorkspace: async (workspace, config: any = {}) => {
         const res = await fetchRawls(
           `workspaces/${workspace.namespace}/${workspace.name}/methodconfigs`,

src/libs/ajax/methods/methods-models.ts

@@ -42,6 +42,14 @@ export interface MethodQuery {
   entityType: string;
 }
 
+/** Type for Orchestration's create method snapshot schema */
+export interface CreateSnapshotRequest {
+  synopsis?: string;
+  snapshotComment?: string;
+  documentation?: string;
+  payload: string;
+}
+
 /**
  * Type for Orchestration's MethodResponse schema.
  *

src/libs/ajax/methods/providers/EditMethodProvider.test.ts

@@ -0,0 +1,75 @@
+import { asMockedFn, partial } from '@terra-ui-packages/test-utils';
+import { Methods, MethodsAjaxContract } from 'src/libs/ajax/methods/Methods';
+import { MethodResponse } from 'src/libs/ajax/methods/methods-models';
+import { editMethodProvider } from 'src/libs/ajax/methods/providers/EditMethodProvider';
+import { oidcStore } from 'src/libs/state';
+
+jest.mock('src/libs/ajax/methods/Methods');
+
+type MethodAjaxContract = MethodsAjaxContract['method'];
+
+const mockMethodResponse: MethodResponse = {
+  name: 'groot-method',
+  createDate: '2024-11-20T14:40:32Z',
+  documentation: 'documentation',
+  synopsis: 'synopsis',
+  entityType: 'Workflow',
+  snapshotComment: 'snapshot comment',
+  snapshotId: 4,
+  namespace: 'groot-namespace',
+  payload: 'workflow myGreatWorkflow {}',
+  url: 'http://agora.dsde-dev.broadinstitute.org/api/v1/methods/groot-namespace/groot-method/4',
+};
+
+jest.spyOn(oidcStore, 'get').mockImplementation(
+  jest.fn().mockReturnValue({
+    userManager: { getUser: jest.fn() },
+  })
+);
+
+const mockAjax = () => {
+  const mockCreateSnapshot = jest.fn().mockReturnValue(mockMethodResponse);
+  asMockedFn(Methods).mockReturnValue({
+    method: jest.fn(() => {
+      return partial<ReturnType<MethodAjaxContract>>({
+        createSnapshot: mockCreateSnapshot,
+      });
+    }) as MethodAjaxContract,
+  } as MethodsAjaxContract);
+};
+
+describe('EditMethodProvider', () => {
+  it('handles create new snapshot call', async () => {
+    // Arrange
+    mockAjax();
+    const signal = new window.AbortController().signal;
+
+    // Act
+    const result = await editMethodProvider.createNewSnapshot(
+      'groot-namespace',
+      'groot-method',
+      3,
+      true,
+      'synopsis',
+      'documentation',
+      'workflow myGreatWorkflow {}',
+      'snapshot comment',
+      { signal }
+    );
+
+    // Assert
+    expect(Methods).toBeCalledTimes(1);
+    expect(Methods).toBeCalledWith(signal);
+    expect(Methods().method).toHaveBeenCalledWith('groot-namespace', 'groot-method', 3);
+    expect(Methods().method('groot-namespace', 'groot-method', 3).createSnapshot).toHaveBeenCalledWith(
+      {
+        payload: 'workflow myGreatWorkflow {}',
+        documentation: 'documentation',
+        synopsis: 'synopsis',
+        snapshotComment: 'snapshot comment',
+      },
+      true
+    );
+    expect(result).toEqual(mockMethodResponse);
+  });
+});

src/libs/ajax/methods/providers/EditMethodProvider.ts

@@ -0,0 +1,42 @@
+import { AbortOption } from '@terra-ui-packages/data-client-core';
+import { Methods } from 'src/libs/ajax/methods/Methods';
+import { MethodResponse } from 'src/libs/ajax/methods/methods-models';
+
+export interface EditMethodProvider {
+  createNewSnapshot: (
+    namespace: string,
+    name: string,
+    snapshotId: number,
+    redactPreviousSnapshot: boolean,
+    synopsis: string,
+    documentation: string,
+    wdl: string,
+    snapshotComment: string,
+    options?: AbortOption
+  ) => Promise<MethodResponse>;
+}
+
+export const editMethodProvider: EditMethodProvider = {
+  createNewSnapshot: async (
+    namespace: string,
+    name: string,
+    snapshotId: number,
+    redactPreviousSnapshot: boolean,
+    synopsis: string,
+    documentation: string,
+    wdl: string,
+    snapshotComment: string,
+    options: AbortOption = {}
+  ): Promise<MethodResponse> => {
+    const { signal } = options;
+
+    const payload = {
+      synopsis,
+      snapshotComment,
+      documentation,
+      payload: wdl,
+    };
+
+    return await Methods(signal).method(namespace, name, snapshotId).createSnapshot(payload, redactPreviousSnapshot);
+  },
+};

src/pages/methods/WorkflowList.tsx

@@ -18,7 +18,7 @@ import { useCancellation, useOnMount } from 'src/libs/react-utils';
 import { getTerraUser } from 'src/libs/state';
 import * as Utils from 'src/libs/utils';
 import { withBusyState } from 'src/libs/utils';
-import { WorkflowModal } from 'src/workflows/methods/modals/WorkflowModal';
+import { CreateWorkflowModal } from 'src/workflows/methods/modals/CreateWorkflowModal';
 
 // Note: The first tab key in this array will determine the default tab selected
 // if the tab query parameter is not present or has an invalid value (and when
@@ -288,7 +288,7 @@ export const WorkflowList = (props: WorkflowListProps) => {
           </div>
         )}
         {createWorkflowModalOpen && (
-          <WorkflowModal
+          <CreateWorkflowModal
             title='Create New Method'
             buttonActionName='Upload'
             postMethodProvider={postMethodProvider}

src/pages/methods/workflow-details/WorkflowWrapper.test.tsx

@@ -1,3 +1,4 @@
+import { expect } from '@storybook/test';
 import { delay } from '@terra-ui-packages/core-utils';
 import { act, fireEvent, screen, within } from '@testing-library/react';
 import userEvent, { UserEvent } from '@testing-library/user-event';
@@ -7,6 +8,7 @@ import * as breadcrumbs from 'src/components/breadcrumbs';
 import { Ajax, AjaxContract } from 'src/libs/ajax';
 import { MethodsAjaxContract } from 'src/libs/ajax/methods/Methods';
 import { MethodResponse, Snapshot } from 'src/libs/ajax/methods/methods-models';
+import { editMethodProvider } from 'src/libs/ajax/methods/providers/EditMethodProvider';
 import { postMethodProvider } from 'src/libs/ajax/methods/providers/PostMethodProvider';
 import * as ExportWorkflowToWorkspaceProvider from 'src/libs/ajax/workspaces/providers/ExportWorkflowToWorkspaceProvider';
 import { errorWatcher } from 'src/libs/error.mock';
@@ -276,6 +278,12 @@ const mockCloneSnapshotResponse: MethodResponse = {
   url: 'http://agora.dsde-dev.broadinstitute.org/api/v1/methods/groot-new-namespace/testname_copy/1',
 };
 
+const mockNewSnapshotResponse: MethodResponse = {
+  ...mockSnapshot,
+  snapshotComment: "groot's new snapshot",
+  snapshotId: 2,
+};
+
 describe('workflow wrapper', () => {
   it('displays the method not found page if a method does not exist or the user does not have access', async () => {
     // Arrange
@@ -566,6 +574,132 @@ describe('workflows container', () => {
     expect(dialog2).not.toBeInTheDocument();
   });
 
+  it('renders edit method modal when corresponding button is pressed', async () => {
+    // Arrange
+    mockAjax();
+
+    // set the user's email
+    jest.spyOn(userStore, 'get').mockImplementation(jest.fn().mockReturnValue(mockUserState('[email protected]')));
+
+    const user: UserEvent = userEvent.setup();
+
+    // Act
+    await act(async () => {
+      render(
+        <WorkflowsContainer
+          namespace={mockSnapshot.namespace}
+          name={mockSnapshot.name}
+          snapshotId={`${mockSnapshot.snapshotId}`}
+          tabName='dashboard'
+        />
+      );
+    });
+
+    await user.click(screen.getByRole('button', { name: 'Snapshot action menu' }));
+    await user.click(screen.getByRole('button', { name: 'Edit' }));
+
+    const dialog = screen.getByRole('dialog', { name: /edit/i });
+
+    // Assert
+    expect(dialog).toBeInTheDocument();
+    expect(within(dialog).getByRole('textbox', { name: 'Namespace' })).toHaveAttribute('placeholder', 'testnamespace');
+    expect(within(dialog).getByRole('textbox', { name: 'Namespace' })).toHaveAttribute('disabled');
+    expect(within(dialog).getByRole('textbox', { name: 'Name' })).toHaveAttribute('placeholder', 'testname');
+    expect(within(dialog).getByRole('textbox', { name: 'Name' })).toHaveAttribute('disabled');
+    expect(within(dialog).getByRole('textbox', { name: 'Documentation' })).toHaveDisplayValue('mock documentation');
+    expect(within(dialog).getByRole('textbox', { name: 'Synopsis (80 characters max)' })).toHaveDisplayValue('');
+    expect(within(dialog).getByRole('textbox', { name: 'Snapshot comment' })).toHaveDisplayValue('');
+    expect(within(dialog).getByTestId('wdl editor')).toHaveDisplayValue(mockSnapshot.payload.toString());
+    expect(within(dialog).getByRole('checkbox', { name: 'Delete snapshot 1' })).not.toBeChecked();
+  });
+
+  it('calls the right provider with expected arguments when new snapshot is created', async () => {
+    // Arrange
+    mockAjax();
+
+    jest.spyOn(userStore, 'get').mockImplementation(jest.fn().mockReturnValue(mockUserState('[email protected]')));
+    jest.spyOn(editMethodProvider, 'createNewSnapshot').mockResolvedValue(mockNewSnapshotResponse);
+
+    const user: UserEvent = userEvent.setup();
+
+    // Act
+    await act(async () => {
+      render(
+        <WorkflowsContainer
+          namespace={mockSnapshot.namespace}
+          name={mockSnapshot.name}
+          snapshotId={`${mockSnapshot.snapshotId}`}
+          tabName='dashboard'
+        />
+      );
+    });
+
+    await user.click(screen.getByRole('button', { name: 'Snapshot action menu' }));
+    await user.click(screen.getByRole('button', { name: 'Edit' }));
+
+    fireEvent.change(screen.getByRole('textbox', { name: 'Snapshot comment' }), {
+      target: { value: "groot's new improved snapshot" },
+    });
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Delete snapshot 1' }));
+
+    await user.click(screen.getByRole('button', { name: 'Create new snapshot' }));
+
+    // Assert
+    expect(editMethodProvider.createNewSnapshot).toHaveBeenCalled();
+    expect(editMethodProvider.createNewSnapshot).toHaveBeenCalledWith(
+      mockSnapshot.namespace,
+      mockSnapshot.name,
+      mockSnapshot.snapshotId,
+      true,
+      mockSnapshot.synopsis,
+      mockSnapshot.documentation,
+      mockSnapshot.payload,
+      "groot's new improved snapshot"
+    );
+
+    expect(Nav.goToPath).toHaveBeenCalledWith('workflow-dashboard', {
+      name: 'testname',
+      namespace: 'testnamespace',
+      snapshotId: 2,
+    });
+  });
+
+  it('hides the edit method modal when it is dismissed', async () => {
+    // Arrange
+    mockAjax();
+
+    // set the user's email
+    jest.spyOn(userStore, 'get').mockImplementation(jest.fn().mockReturnValue(mockUserState('[email protected]')));
+
+    const user: UserEvent = userEvent.setup();
+
+    // Act
+    await act(async () => {
+      render(
+        <WorkflowsContainer
+          namespace={mockSnapshot.namespace}
+          name={mockSnapshot.name}
+          snapshotId={`${mockSnapshot.snapshotId}`}
+          tabName='dashboard'
+        />
+      );
+    });
+
+    await user.click(screen.getByRole('button', { name: 'Snapshot action menu' }));
+    await user.click(screen.getByRole('button', { name: 'Edit' }));
+
+    // Assert
+    const dialog1 = screen.queryByRole('dialog', { name: /edit/i });
+    expect(dialog1).toBeInTheDocument();
+
+    // Act
+    await user.click(screen.getByRole('button', { name: 'Cancel' }));
+
+    // Assert
+    const dialog2 = screen.queryByRole('dialog', { name: /edit/i });
+    expect(dialog2).not.toBeInTheDocument();
+  });
+
   it('hides the delete snapshot modal and displays a loading spinner when the deletion is confirmed', async () => {
     // Arrange
     mockAjax({