Feat/rework config page

src/components/Clipboard/Clipboard.tsx

@@ -1,18 +1,13 @@
 import React from 'react';
 import { AppEvents } from '@grafana/data';
-import { useStyles } from '@grafana/ui';
+import { useStyles2 } from '@grafana/ui';
 import appEvents from 'grafana/app/core/app_events';
 import { css, cx } from '@emotion/css';
 
+import { Preformatted } from '../Preformatted';
 import { CopyToClipboard } from './CopyToClipboard';
 
 const getStyles = () => ({
-  code: css`
-    width: 100%;
-    word-break: break-all;
-    overflow-y: scroll;
-    max-height: 100%;
-  `,
   container: css`
     display: flex;
     flex-direction: column;
@@ -26,16 +21,18 @@ interface Props {
   content: string;
   className?: string;
   truncate?: boolean;
+  highlight?: string | string[];
+  isCode?: boolean;
 }
 
-export function Clipboard({ content, className, truncate }: Props) {
-  const styles = useStyles(getStyles);
+export function Clipboard({ content, className, truncate, highlight, isCode }: Props) {
+  const styles = useStyles2(getStyles);
 
   return (
     <div className={cx(styles.container, className)}>
-      <pre className={styles.code} data-testid="clipboard-content">
+      <Preformatted isCode={isCode} highlight={highlight} data-testid="clipboard-content">
         {truncate ? content.slice(0, 150) + '...' : content}
-      </pre>
+      </Preformatted>
 
       <CopyToClipboard
         className={styles.button}

src/components/LinkedDatasourceView.tsx

@@ -1,45 +1,63 @@
 import React from 'react';
+import { Alert, Card, Tag } from '@grafana/ui';
 
-import { useCanWriteLogs, useCanWriteMetrics } from 'hooks/useDSPermission';
+import { useCanWriteLogs, useCanWriteMetrics, useCanWriteSM } from 'hooks/useDSPermission';
 import { useLogsDS } from 'hooks/useLogsDS';
 import { useMetricsDS } from 'hooks/useMetricsDS';
+import { useSMDS } from 'hooks/useSMDS';
 
 interface LinkedDatasourceViewProps {
-  type: 'loki' | 'prometheus';
+  type: 'loki' | 'prometheus' | 'synthetic-monitoring-datasource';
 }
 
 export const LinkedDatasourceView = ({ type }: LinkedDatasourceViewProps) => {
   const metricsDS = useMetricsDS();
   const logsDS = useLogsDS();
+  const smDS = useSMDS();
+
+  const canEditSM = useCanWriteSM();
   const canEditLogs = useCanWriteLogs();
   const canEditMetrics = useCanWriteMetrics();
 
   const canEditMap = {
     prometheus: canEditMetrics,
     loki: canEditLogs,
+    'synthetic-monitoring-datasource': canEditSM,
   };
 
   const dsMap = {
     prometheus: metricsDS,
     loki: logsDS,
+    'synthetic-monitoring-datasource': smDS,
   };
 
   const ds = dsMap[type];
 
   if (!ds) {
+    return (
+      <Alert title="Data source missing">
+        &quot;{type}&quot; data source is missing. Please configure it in the data sources settings.
+      </Alert>
+    );
     return null;
   }
 
   const showHref = canEditMap[type];
-  const Tag = showHref ? 'a' : 'div';
 
   return (
-    <Tag className="add-data-source-item" href={showHref ? `datasources/edit/${ds.uid}/` : undefined}>
-      <img className="add-data-source-item-logo" src={ds.meta.info.logos.small} alt="" />
-      <div className="add-data-source-item-text-wrapper">
-        <span className="add-data-source-item-text">{ds.name}</span>
-        <span className="add-data-source-item-desc">{ds.type}</span>
-      </div>
-    </Tag>
+    <Card href={showHref ? `datasources/edit/${ds.uid}/` : undefined}>
+      <Card.Heading>{ds.name}</Card.Heading>
+      <Card.Figure>
+        <img width={40} height={40} src={ds.meta.info.logos.small} alt="" />
+      </Card.Figure>
+
+      {type !== 'synthetic-monitoring-datasource' && (
+        <Card.Tags>
+          <Tag name="Linked" />
+        </Card.Tags>
+      )}
+
+      <Card.Meta>{ds.type}</Card.Meta>
+    </Card>
   );
 };

src/components/Preformatted.test.tsx

@@ -0,0 +1,77 @@
+// @ts-ignore
+import React from 'react';
+import { render, screen, within } from '@testing-library/react';
+
+// @ts-ignore
+import { Preformatted } from './Preformatted';
+
+describe('Preformatted', () => {
+  it('should render content within a pre tag', async () => {
+    const sampleContent = '__sample_content__';
+    render(<Preformatted>{sampleContent}</Preformatted>);
+    const pre = screen.queryByText(sampleContent);
+
+    expect(pre).toBeInTheDocument();
+  });
+
+  it('should render content within a pre tag, within a code tag', async () => {
+    const sampleContent = '__sample_content__';
+    render(<Preformatted isCode>{sampleContent}</Preformatted>);
+    const pre = screen.queryByText(sampleContent, { selector: 'code' });
+
+    expect(pre).toBeInTheDocument();
+  });
+
+  it.each([
+    {
+      highlight: '__sample__',
+      content: `This is a __sample__ content.`, // Note: 'This' is used to find the pre tag
+      expectedLength: 1,
+    },
+    {
+      highlight: '__target__',
+      content: `This should highlight __target__ and __target__`, // Note: 'This' is used to find the pre tag
+      expectedLength: 2,
+    },
+  ])(
+    'should take string as highlight prop ($expectedLength counts)',
+    async ({ highlight, content, expectedLength }) => {
+      render(<Preformatted highlight={highlight}>{content}</Preformatted>);
+
+      const pre = screen.getByText(/^This/, { selector: 'pre' });
+      expect(pre).toBeInTheDocument();
+      const highlighted = pre && within(pre).queryAllByText(highlight, { selector: 'strong' });
+      expect(highlighted).toHaveLength(expectedLength);
+    }
+  );
+
+  it.each([
+    {
+      highlight: ['__sample__'],
+      content: `This should replace __sample__`, // Note: 'This' is used to find the pre tag
+      expectedLength: 1,
+    },
+    {
+      highlight: ['__sample__', '__target__'],
+      content: `This should replace __sample__ and __target__`, // Note: 'This' is used to find the pre tag
+      expectedLength: 2,
+    },
+    {
+      highlight: ['__sample__', '__target__', '__another__'],
+      content: `This should replace __sample__, __another__ and __target__`, // Note: 'This' is used to find the pre tag
+      expectedLength: 3,
+    },
+  ])('should take array as highlight prop ($expectedLength counts)', async ({ highlight, content, expectedLength }) => {
+    render(<Preformatted highlight={highlight}>{content}</Preformatted>);
+
+    const pre = screen.getByText(/^This/, { selector: 'pre' });
+    expect(pre).toBeInTheDocument();
+
+    const count = highlight.reduce((acc, word) => {
+      const match = pre && within(pre).queryAllByText(word, { selector: 'strong' });
+      return acc + match.length;
+    }, 0);
+
+    expect(count).toBe(expectedLength);
+  });
+});

src/components/Preformatted.tsx

@@ -0,0 +1,66 @@
+import React, { Children, Fragment, PropsWithChildren, ReactNode } from 'react';
+import { GrafanaTheme2 } from '@grafana/data';
+import { useStyles2 } from '@grafana/ui';
+import { css, cx } from '@emotion/css';
+import { DataTestIds } from 'test/dataTestIds';
+
+function highlightCode(children: ReactNode, highlight?: string): ReactNode {
+  if (!highlight) {
+    return children;
+  }
+  const elements = Children.toArray(children);
+  return elements.map((child) => {
+    if (typeof child === 'string') {
+      return child
+        .split(highlight)
+        .flatMap((item, index) => [item, <strong key={`${highlight}.${index}`}>{highlight}</strong>])
+        .slice(0, -1);
+    }
+    return child;
+  });
+}
+
+function doHighlights(children: ReactNode, highlights?: string | string[]): ReactNode {
+  const highlightsArray = Array.isArray(highlights) ? highlights : [highlights];
+
+  return highlights
+    ? highlightsArray.reduce((acc, currentValue, currentIndex) => {
+        return highlightCode(acc, currentValue);
+      }, children)
+    : children;
+}
+
+export function Preformatted({
+  children,
+  className,
+  highlight,
+  isCode = false,
+}: PropsWithChildren<{ className?: string; highlight?: string | string[]; isCode?: boolean }>) {
+  const styles = useStyles2(getStyles);
+  const Wrapper = isCode ? 'code' : Fragment;
+
+  return (
+    <pre data-testid={DataTestIds.PREFORMATTED} className={cx(styles.container, className)}>
+      <Wrapper>{doHighlights(children, highlight)}</Wrapper>
+    </pre>
+  );
+}
+
+function getStyles(theme: GrafanaTheme2) {
+  return {
+    container: css({
+      overflowY: 'auto',
+      maxHeight: '100%',
+      whiteSpace: 'pre-wrap',
+      backgroundColor: theme.colors.background.canvas,
+      marginBottom: theme.spacing(2),
+      '& strong': {
+        color: theme.colors.warning.text,
+      },
+      '& code': {
+        padding: 0,
+        margin: 0,
+      },
+    }),
+  };
+}

src/components/ProbeTokenModal/ProbeTokenModal.tsx

@@ -13,7 +13,7 @@ type TokenModalProps = {
 
 export const ProbeTokenModal = ({ actionText, isOpen, onDismiss, token }: TokenModalProps) => {
   return (
-    <Modal isOpen={isOpen} title="Probe Authentication Token" onDismiss={onDismiss}>
+    <Modal isOpen={isOpen} title="Probe access token" onDismiss={onDismiss}>
       <Alert severity="warning" title="Note">
         This is the only time you will see this token. If you need to view it again, you will need to reset the token.
       </Alert>