Plugins Catalog: Use appSubUrl to generate plugins catalog urls (#54426)

* Plugins Catalog: us appSubUrl to generate plugins catalog urls

* add tests for PluginList with app sub url

* remove unnecessary comments

public/app/features/plugins/admin/components/PluginList.test.tsx

@@ -0,0 +1,77 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+
+import { PluginSignatureStatus } from '@grafana/data';
+import { config } from '@grafana/runtime';
+
+import { CatalogPlugin, PluginListDisplayMode } from '../types';
+
+import { PluginList } from './PluginList';
+
+jest.mock('react-router-dom', () => ({
+  useLocation: jest.fn(),
+}));
+
+jest.mock('@grafana/runtime', () => ({
+  ...jest.requireActual('@grafana/runtime'),
+  config: {
+    appSubUrl: '',
+  },
+}));
+
+const useLocationMock = useLocation as jest.Mock;
+
+const getMockPlugin = (id: string): CatalogPlugin => {
+  return {
+    description: 'The test plugin',
+    downloads: 5,
+    id,
+    info: {
+      logos: {
+        small: 'https://grafana.com/api/plugins/test-plugin/versions/0.0.10/logos/small',
+        large: 'https://grafana.com/api/plugins/test-plugin/versions/0.0.10/logos/large',
+      },
+    },
+    name: 'Testing Plugin',
+    orgName: 'Test',
+    popularity: 0,
+    signature: PluginSignatureStatus.valid,
+    publishedAt: '2020-09-01',
+    updatedAt: '2021-06-28',
+    hasUpdate: false,
+    isInstalled: false,
+    isCore: false,
+    isDev: false,
+    isEnterprise: false,
+    isDisabled: false,
+    isPublished: true,
+  };
+};
+
+const plugins = [getMockPlugin('test1'), getMockPlugin('test2'), getMockPlugin('test3')];
+describe('PluginList', () => {
+  beforeAll(() => {
+    useLocationMock.mockImplementation(() => ({
+      pathname: '/plugins',
+    }));
+  });
+
+  it('renders a plugin list', () => {
+    const result = render(<PluginList plugins={plugins} displayMode={PluginListDisplayMode.List} />);
+    expect(result.getByTestId('plugin-list')).toBeTruthy();
+    const links = result.getAllByRole('link');
+    for (const link of links) {
+      expect(link).toHaveAttribute('href', expect.stringMatching(/^\/plugins\/test\d/));
+    }
+  });
+  it('renders a plugin list with a subAppUrl', () => {
+    config.appSubUrl = 'test-sub-url';
+    const result = render(<PluginList plugins={plugins} displayMode={PluginListDisplayMode.List} />);
+    expect(result.getByTestId('plugin-list')).toBeTruthy();
+    const links = result.getAllByRole('link');
+    for (const link of links) {
+      expect(link).toHaveAttribute('href', expect.stringMatching(/^test-sub-url\/plugins\/test\d/));
+    }
+  });
+});

public/app/features/plugins/admin/components/PluginList.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { useLocation } from 'react-router-dom';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { config } from '@grafana/runtime';
 import { useStyles2 } from '@grafana/ui';
 
 import { CatalogPlugin, PluginListDisplayMode } from '../types';
@@ -18,11 +19,12 @@ export const PluginList = ({ plugins, displayMode }: Props) => {
   const isList = displayMode === PluginListDisplayMode.List;
   const styles = useStyles2(getStyles);
   const location = useLocation();
+  const pathName = config.appSubUrl + location.pathname;
 
   return (
     <div className={cx(styles.container, { [styles.list]: isList })} data-testid="plugin-list">
       {plugins.map((plugin) => (
-        <PluginListItem key={plugin.id} plugin={plugin} pathName={location.pathname} displayMode={displayMode} />
+        <PluginListItem key={plugin.id} plugin={plugin} pathName={pathName} displayMode={displayMode} />
       ))}
     </div>
   );