feat(explore): Update Explore Saved Queries table to use SavedEntityTable component (#89415)

- Refactors the Explore Saved Queries table to use the shared
SavedEntityTable component
- Updates saved queries query column to display visualization and group
by

Author: edwardgou-sentry

static/app/components/modals/explore/saveQueryModal.spec.tsx

@@ -26,7 +26,7 @@ describe('SaveQueryModal', function () {
         queries={[
           {
             query: 'span.op:pageload',
-            visualizes: [{chartType: 1, yAxes: ['avg(span.duration)'], label: 'A'}],
+            visualizes: [{chartType: 1, yAxes: ['avg(span.duration)']}],
             groupBys: ['span.op'],
           },
         ]}
@@ -57,7 +57,7 @@ describe('SaveQueryModal', function () {
         queries={[
           {
             query: 'span.op:pageload',
-            visualizes: [{chartType: 1, yAxes: ['avg(span.duration)'], label: 'A'}],
+            visualizes: [{chartType: 1, yAxes: ['avg(span.duration)']}],
             groupBys: ['span.op'],
           },
         ]}
@@ -85,7 +85,7 @@ describe('SaveQueryModal', function () {
         queries={[
           {
             query: 'span.op:pageload',
-            visualizes: [{chartType: 1, yAxes: ['avg(span.duration)'], label: 'A'}],
+            visualizes: [{chartType: 1, yAxes: ['avg(span.duration)']}],
             groupBys: ['span.op'],
           },
         ]}

static/app/components/modals/explore/saveQueryModal.tsx

@@ -20,11 +20,11 @@ import {defined} from 'sentry/utils';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import useOrganization from 'sentry/utils/useOrganization';
 import {useSetExplorePageParams} from 'sentry/views/explore/contexts/pageParamsContext';
-import type {Visualize} from 'sentry/views/explore/contexts/pageParamsContext/visualizes';
+import type {BaseVisualize} from 'sentry/views/explore/contexts/pageParamsContext/visualizes';
 
 type SingleQueryProps = {
   query: string;
-  visualizes: Visualize[];
+  visualizes: BaseVisualize[];
   groupBys?: string[]; // This needs to be passed in because saveQuery relies on being within the Explore PageParamsContext to fetch params
 };
 
@@ -122,11 +122,16 @@ function SaveQueryModal({
   );
 }
 
-function ExploreParams({query, visualizes, groupBys}: SingleQueryProps) {
+export function ExploreParams({
+  query,
+  visualizes,
+  groupBys,
+  className,
+}: SingleQueryProps & {className?: string}) {
   const yAxes = visualizes.flatMap(visualize => visualize.yAxes);
 
   return (
-    <ExploreParamsContainer>
+    <ExploreParamsContainer className={className}>
       <ExploreParamSection>
         <ExploreParamTitle>{t('Visualize')}</ExploreParamTitle>
         <ExploreParamSection>
@@ -153,7 +158,6 @@ function ExploreParams({query, visualizes, groupBys}: SingleQueryProps) {
           </ExploreParamSection>
         </ExploreParamSection>
       )}
-      <ExploreParamSection>...</ExploreParamSection>
     </ExploreParamsContainer>
   );
 }

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

@@ -19,6 +19,7 @@ describe('SavedQueriesTable', () => {
           id: 1,
           name: 'Query Name',
           projects: [1],
+          environment: ['production'],
           createdBy: {
             name: 'Test User',
           },
@@ -56,9 +57,9 @@ describe('SavedQueriesTable', () => {
   it('should render', async () => {
     render(<SavedQueriesTable mode="owned" />);
     expect(screen.getByText('Name')).toBeInTheDocument();
-    expect(screen.getByText('Projects')).toBeInTheDocument();
+    expect(screen.getByText('Project')).toBeInTheDocument();
     expect(screen.getByText('Query')).toBeInTheDocument();
-    expect(screen.getByText('Owner')).toBeInTheDocument();
+    expect(screen.getByText('Creator')).toBeInTheDocument();
     expect(screen.getByText('Last Viewed')).toBeInTheDocument();
     await screen.findByText('Query Name');
   });
@@ -98,7 +99,7 @@ describe('SavedQueriesTable', () => {
   it('deletes a query', async () => {
     render(<SavedQueriesTable mode="owned" />);
     await screen.findByText('Query Name');
-    await userEvent.click(screen.getByLabelText('Query actions'));
+    await userEvent.click(screen.getByLabelText('More options'));
     await userEvent.click(screen.getByText('Delete'));
     await waitFor(() =>
       expect(deleteQueryMock).toHaveBeenCalledWith(
@@ -114,7 +115,7 @@ describe('SavedQueriesTable', () => {
     render(<SavedQueriesTable mode="owned" />);
     expect(await screen.findByText('Query Name')).toHaveAttribute(
       'href',
-      '/organizations/org-slug/traces/?dataset=spansRpc&groupBy=&id=1&project=1&title=Query%20Name'
+      '/organizations/org-slug/traces/?dataset=spansRpc&environment=production&groupBy=&id=1&project=1&title=Query%20Name'
     );
   });
 
@@ -126,6 +127,7 @@ describe('SavedQueriesTable', () => {
           id: 1,
           name: 'Query Name',
           projects: [1],
+          environment: ['production'],
           createdBy: {
             name: 'Test User',
           },
@@ -145,7 +147,7 @@ describe('SavedQueriesTable', () => {
     render(<SavedQueriesTable mode="owned" />);
     expect(await screen.findByText('Query Name')).toHaveAttribute(
       'href',
-      '/organizations/org-slug/explore/traces/compare/?dataset=spansRpc&id=1&project=1&queries=%7B%22groupBys%22%3A%5B%5D%2C%22yAxes%22%3A%5B%5D%7D&queries=%7B%22groupBys%22%3A%5B%5D%2C%22yAxes%22%3A%5B%5D%7D&title=Query%20Name'
+      '/organizations/org-slug/explore/traces/compare/?dataset=spansRpc&environment=production&id=1&project=1&queries=%7B%22groupBys%22%3A%5B%5D%2C%22yAxes%22%3A%5B%5D%7D&queries=%7B%22groupBys%22%3A%5B%5D%2C%22yAxes%22%3A%5B%5D%7D&title=Query%20Name'
     );
   });
 
@@ -157,6 +159,7 @@ describe('SavedQueriesTable', () => {
           id: 1,
           name: 'Query Name',
           projects: [1],
+          environment: ['production'],
           createdBy: {
             name: 'Test User',
           },
@@ -172,6 +175,7 @@ describe('SavedQueriesTable', () => {
           id: 2,
           name: 'Starred Query',
           projects: [1],
+          environment: ['production'],
           createdBy: {
             name: 'Test User',
           },
@@ -202,7 +206,7 @@ describe('SavedQueriesTable', () => {
         })
       )
     );
-    await userEvent.click(screen.getByLabelText('Unstar'));
+    await userEvent.click(screen.getAllByLabelText('Unstar')[1]!);
     await waitFor(() =>
       expect(unstarQueryMock).toHaveBeenCalledWith(
         `/organizations/${organization.slug}/explore/saved/2/starred/`,
@@ -241,7 +245,7 @@ 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.getByLabelText('More options'));
     await userEvent.click(screen.getByText('Duplicate'));
     await waitFor(() =>
       expect(saveQueryMock).toHaveBeenCalledWith(