feat(explore): Explore Saved Query Duplicate (#89237)

Implements the Duplicate button for explore saved queries

Author: edwardgou-sentry

static/app/views/explore/hooks/useSaveQuery.tsx

@@ -98,6 +98,23 @@ export function useSaveQuery() {
     return response;
   }, [api, organization.slug, id, data, invalidateSavedQueries]);
 
+  const saveQueryFromSavedQuery = useCallback(
+    async (savedQuery: SavedQuery) => {
+      const response = await api.requestPromise(
+        `/organizations/${organization.slug}/explore/saved/`,
+        {
+          method: 'POST',
+          data: {
+            ...savedQuery,
+          },
+        }
+      );
+      invalidateSavedQueries();
+      return response;
+    },
+    [api, organization.slug, invalidateSavedQueries]
+  );
+
   const updateQueryFromSavedQuery = useCallback(
     async (savedQuery: SavedQuery) => {
       const response = await api.requestPromise(
@@ -115,5 +132,5 @@ export function useSaveQuery() {
     [api, organization.slug, invalidateSavedQueries]
   );
 
-  return {saveQuery, updateQuery, updateQueryFromSavedQuery};
+  return {saveQuery, updateQuery, saveQueryFromSavedQuery, updateQueryFromSavedQuery};
 }

static/app/views/explore/savedQueries/savedQueriesTable.spec.tsx

@@ -9,6 +9,7 @@ describe('SavedQueriesTable', () => {
   let deleteQueryMock: jest.Mock;
   let starQueryMock: jest.Mock;
   let unstarQueryMock: jest.Mock;
+  let saveQueryMock: jest.Mock;
 
   beforeEach(() => {
     getQueriesMock = MockApiClient.addMockResponse({
@@ -42,6 +43,10 @@ describe('SavedQueriesTable', () => {
       url: `/organizations/${organization.slug}/explore/saved/2/starred/`,
       method: 'POST',
     });
+    saveQueryMock = MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/explore/saved/`,
+      method: 'POST',
+    });
   });
 
   afterEach(() => {
@@ -233,4 +238,22 @@ describe('SavedQueriesTable', () => {
       })
     );
   });
+
+  it('should duplicate a query', async () => {
+    render(<SavedQueriesTable mode="owned" />);
+    await screen.findByText('Query Name');
+    await userEvent.click(screen.getByLabelText('Query actions'));
+    await userEvent.click(screen.getByText('Duplicate'));
+    await waitFor(() =>
+      expect(saveQueryMock).toHaveBeenCalledWith(
+        `/organizations/${organization.slug}/explore/saved/`,
+        expect.objectContaining({
+          method: 'POST',
+          data: expect.objectContaining({
+            name: 'Query Name (Copy)',
+          }),
+        })
+      )
+    );
+  });
 });

static/app/views/explore/savedQueries/savedQueriesTable.tsx

@@ -86,7 +86,7 @@ export function SavedQueriesTable({
   const filteredData = data?.filter(row => row.query?.length > 0) ?? [];
   const {deleteQuery} = useDeleteQuery();
   const {starQuery} = useStarQuery();
-  const {updateQueryFromSavedQuery} = useSaveQuery();
+  const {saveQueryFromSavedQuery, updateQueryFromSavedQuery} = useSaveQuery();
 
   const [starredIds, setStarredIds] = useState<number[]>([]);
 
@@ -126,6 +126,13 @@ export function SavedQueriesTable({
     [updateQueryFromSavedQuery]
   );
 
+  const duplicateQuery = async (savedQuery: SavedQuery) => {
+    await saveQueryFromSavedQuery({
+      ...savedQuery,
+      name: `${savedQuery.name} (Copy)`,
+    });
+  };
+
   const handleCursor: CursorHandler = (_cursor, pathname, query) => {
     navigate({
       pathname,
@@ -199,6 +206,15 @@ export function SavedQueriesTable({
                 {
                   key: 'duplicate',
                   label: t('Duplicate'),
+                  onAction: async () => {
+                    addLoadingMessage(t('Duplicating query...'));
+                    try {
+                      await duplicateQuery(row);
+                      addSuccessMessage(t('Query duplicated'));
+                    } catch (error) {
+                      addErrorMessage(t('Unable to duplicate query'));
+                    }
+                  },
                 },
                 {
                   key: 'delete',