Plugins Catalog: Display Request data source and view roadmap links (#91175)

* Add roadmap links to connection tab

* move to its own component

* add roadmaplinks to the catalog browse page

* use trans for text

* Change TextLink to accept ReactNode

* use Space component

* Add translations

packages/grafana-ui/src/components/Link/TextLink.tsx

@@ -27,7 +27,7 @@ interface TextLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 't
   weight?: 'light' | 'regular' | 'medium' | 'bold';
   /** Set the icon to be shown. An external link will show the 'external-link-alt' icon as default.*/
   icon?: IconName;
-  children: string;
+  children: React.ReactNode;
 }
 
 const svgSizes: {

public/app/features/connections/tabs/ConnectData/ConnectData.test.tsx

@@ -116,4 +116,11 @@ describe('Add new connection', () => {
     await userEvent.click(await screen.findByText('Sample data source'));
     expect(screen.queryByText(new RegExp(exampleSentenceInModal))).toBeInTheDocument();
   });
+
+  test('Show request data source and roadmap links', async () => {
+    renderPage([getCatalogPluginMock(), mockCatalogDataSourcePlugin]);
+
+    expect(await screen.findByText('Request a new data source')).toBeInTheDocument();
+    expect(await screen.findByText('View roadmap')).toBeInTheDocument();
+  });
 });

public/app/features/connections/tabs/ConnectData/ConnectData.tsx

@@ -7,6 +7,7 @@ import { useStyles2, LoadingPlaceholder, EmptyState } from '@grafana/ui';
 import { contextSrv } from 'app/core/core';
 import { useQueryParams } from 'app/core/hooks/useQueryParams';
 import { t } from 'app/core/internationalization';
+import { RoadmapLinks } from 'app/features/plugins/admin/components/RoadmapLinks';
 import { useGetAll } from 'app/features/plugins/admin/state/hooks';
 import { AccessControlAction } from 'app/types';
 
@@ -103,6 +104,7 @@ export function AddNewConnection() {
           message={t('connections.connect-data.empty-message', 'No results matching your query were found')}
         />
       )}
+      <RoadmapLinks />
     </>
   );
 }

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

@@ -0,0 +1,26 @@
+import { reportInteraction } from '@grafana/runtime';
+import { Space, TextLink } from '@grafana/ui';
+import { Trans } from 'app/core/internationalization';
+
+export const RoadmapLinks = () => {
+  return (
+    <div>
+      <Space v={2} />
+      <TextLink
+        href="https://github.com/grafana/grafana/issues/new?assignees=&labels=area%2Fdatasource%2Ctype%2Fnew-plugin-request&projects=&template=3-data_source_request.yaml&title=%5BNew+Data+Source%5D%3A+%3Cname-of-service%3E"
+        onClick={() => reportInteraction('connections_data_source_request_clicked')}
+        external
+      >
+        <Trans i18nKey="connections.connect-data.request-data-source">Request a new data source</Trans>
+      </TextLink>
+      <br />
+      <TextLink
+        href="https://github.com/orgs/grafana/projects/619/views/1?pane=info"
+        onClick={() => reportInteraction('connections_data_source_roadmap_clicked')}
+        external
+      >
+        <Trans i18nKey="connections.connect-data.roadmap">View roadmap</Trans>
+      </TextLink>
+    </div>
+  );
+};

public/app/features/plugins/admin/pages/Browse.test.tsx

@@ -180,6 +180,17 @@ describe('Browse list of plugins', () => {
       expect(queryByText('Plugin 2')).not.toBeInTheDocument();
       expect(queryByText('Plugin 3')).not.toBeInTheDocument();
     });
+
+    test('Show request data source and roadmap links', async () => {
+      const { queryByText } = renderBrowse('/plugins', [
+        getCatalogPluginMock({ id: 'plugin-1', name: 'Plugin 1', type: PluginType.datasource }),
+        getCatalogPluginMock({ id: 'plugin-2', name: 'Plugin 2', type: PluginType.panel }),
+        getCatalogPluginMock({ id: 'plugin-3', name: 'Plugin 3', type: PluginType.datasource }),
+      ]);
+
+      expect(queryByText('Request a new data source')).toBeInTheDocument();
+      expect(queryByText('View roadmap')).toBeInTheDocument();
+    });
   });
 
   describe('when searching', () => {

public/app/features/plugins/admin/pages/Browse.tsx

@@ -13,6 +13,7 @@ import { useSelector } from 'app/types';
 
 import { HorizontalGroup } from '../components/HorizontalGroup';
 import { PluginList } from '../components/PluginList';
+import { RoadmapLinks } from '../components/RoadmapLinks';
 import { SearchField } from '../components/SearchField';
 import { Sorters } from '../helpers';
 import { useHistory } from '../hooks/useHistory';
@@ -162,6 +163,7 @@ export default function Browse({ route }: GrafanaRouteComponentProps): ReactElem
         <div className={styles.listWrap}>
           <PluginList plugins={plugins} displayMode={displayMode} isLoading={isLoading} />
         </div>
+        <RoadmapLinks />
       </Page.Contents>
     </Page>
   );

public/locales/en-US/grafana.json

@@ -307,7 +307,9 @@
   "connections": {
     "connect-data": {
       "category-header-label": "Data sources",
-      "empty-message": "No results matching your query were found"
+      "empty-message": "No results matching your query were found",
+      "request-data-source": "Request a new data source",
+      "roadmap": "View roadmap"
     },
     "search": {
       "placeholder": "Search all"

public/locales/pseudo-LOCALE/grafana.json

@@ -307,7 +307,9 @@
   "connections": {
     "connect-data": {
       "category-header-label": "Đäŧä şőūřčęş",
-      "empty-message": "Ńő řęşūľŧş mäŧčĥįʼnģ yőūř qūęřy ŵęřę ƒőūʼnđ"
+      "empty-message": "Ńő řęşūľŧş mäŧčĥįʼnģ yőūř qūęřy ŵęřę ƒőūʼnđ",
+      "request-data-source": "Ŗęqūęşŧ ä ʼnęŵ đäŧä şőūřčę",
+      "roadmap": "Vįęŵ řőäđmäp"
     },
     "search": {
       "placeholder": "Ŝęäřčĥ äľľ"