Fix: Revert to v1.16.9

.release-it.js

@@ -0,0 +1,21 @@
+module.exports = {
+  // TODD: enable the before init hooks once grafana/toolkit can limit the jest workers
+  git: {
+    commitMessage: 'chore: update version',
+    tag: false,
+    push: false,
+    commit: false,
+  },
+  github: {
+    release: false,
+  },
+  npm: {
+    publish: false,
+  },
+  plugins: {
+    '@release-it/conventional-changelog': {
+      preset: 'angular',
+      infile: 'CHANGELOG.md',
+    },
+  },
+};

CODEOWNERS

@@ -2,12 +2,3 @@
 # https://git-scm.com/docs/gitignore#_pattern_format
 
 * @grafana/synthetic-monitoring-fe
-
-# These files are updated by release-please and we need any member of the
-# larger team to be able to approve them.
-#
-# The docs seem to suggest that the last matching pattern is the one that is
-# used, so we need to keep the * pattern above this one.
-/CHANGELOG.md @grafana/synthetic-monitoring-fe @grafana/synthetic-monitoring-dev
-/package.json @grafana/synthetic-monitoring-fe @grafana/synthetic-monitoring-dev
-/.github/release-please/release-please-config.json @grafana/synthetic-monitoring-fe @grafana/synthetic-monitoring-dev

__mocks__/@grafana/faro-web-sdk.ts

@@ -0,0 +1,11 @@
+module.exports = {
+  faro: {
+    api: {
+      pushMeasurement: jest.fn(() => console.log('hhhhhhiiiiii')),
+      pushEvent: jest.fn(),
+      pushError: jest.fn(),
+    },
+  },
+  isError: jest.fn(),
+  isObject: jest.fn(),
+};

__mocks__/@grafana/ui.tsx

@@ -0,0 +1,42 @@
+// @ts-ignore
+window.__react_router_build__ = undefined;
+
+const ui = jest.requireActual('@grafana/ui');
+import React, { forwardRef } from 'react';
+
+const Icon = forwardRef((props, ref) => <svg {...props} />);
+Icon.displayName = 'Icon';
+
+interface BigValueProps {
+  value: {
+    numeric: number;
+    text?: string;
+    title?: string;
+  };
+}
+
+export function BigValue({ value }: BigValueProps) {
+  return (
+    <div>
+      {/* {value.numeric} */}
+      {value.text && <span>{value.text}</span>}
+      {value.title && <label>{value.title}</label>}
+    </div>
+  );
+}
+
+// Monaco does not render with jest and is stuck at "Loading..."
+// There doesn't seem to be a solution to this at this point,
+// mocking it instead. Related github issue:
+// https://github.com/suren-atoyan/monaco-react/issues/88
+const CodeEditor = React.forwardRef((props: any, ref: any) => {
+  return <textarea ref={ref} data-testid="code-editor" onChange={props.onChange} value={props.value} />;
+});
+CodeEditor.displayName = 'CodeEditor';
+
+module.exports = {
+  ...ui,
+  Icon,
+  BigValue,
+  CodeEditor,
+};

__mocks__/components/SimpleMap/index.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const SimpleMap = () => {
+  return <div>A pretty map</div>;
+};

__mocks__/grafana/app/core/app_events.ts

@@ -0,0 +1,5 @@
+export const appEvents = {
+  emit: () => {},
+};
+// eslint-disable-next-line no-restricted-syntax
+export default appEvents;

cspell.config.json

@@ -0,0 +1,5 @@
+{
+  "ignorePaths": ["node_modules"],
+  "ignoreRegExpList": [".*"],
+  "words": ["grafana", "datasource", "datasources", "gifs", ".*"]
+}

dummy.scss

@@ -0,0 +1 @@
+// this file exists solely to trick the spell check. Delete this as soon as possible

jest.config.js

@@ -12,18 +12,17 @@ module.exports = {
     ...config.moduleNameMapper,
     '^lodash-es$': 'lodash',
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|md)$':
-      '<rootDir>/src/test/mocks/unsupported_file.js',
-    '^!raw-loader!*': '<rootDir>/src/test/mocks/rawLoader.js',
-    '^(.+)\\?raw$': '<rootDir>/src/test/mocks/rawLoader.js',
+      '<rootDir>/src/test/fileMock.js',
+    '^!raw-loader!*': '<rootDir>/src/test/rawLoaderMock.js',
+    '^(.+)\\?raw$': '<rootDir>/src/test/rawLoaderMock.js',
     '^grafana/app/core/core$': '<rootDir>/src/test/mocks/grafana/app/core/core.js',
-    '^grafana/app/core/app_events$': '<rootDir>/src/test/mocks/grafana/app/core/app_events.js',
   },
   testTimeout: 30000,
   // Inform jest to only transform specific node_module packages.
   transform: {
     ...config.transform,
     '^.+\\.mjs$': ['@swc/jest'],
-    'assets/snippets/.+\\.js$': '<rootDir>/src/test/mocks/rawLoader.js',
+    'assets/snippets/.+\\.js$': '<rootDir>/src/test/rawLoaderMock.js',
   },
   transformIgnorePatterns: [
     nodeModulesToTransform([

package.json

@@ -16,6 +16,7 @@
     "release:test": "release-it --dry-run --ci --no-git.requireCleanWorkingDir",
     "server": "docker compose up --build",
     "sign": "npx --yes @grafana/sign-plugin@latest",
+    "spellcheck": "cspell -c cspell.config.json \"**/*.{ts,tsx,js,go,md,mdx,yml,yaml,json,scss,css}\"",
     "test": "jest --all",
     "test:changed": "jest --watch --onlyChanged",
     "typecheck": "tsc --noEmit",

src/components/AddNewCheckButton/AddNewCheckButton.tsx

@@ -2,20 +2,19 @@ import React from 'react';
 import { Button } from '@grafana/ui';
 
 import { ROUTES } from 'routing/types';
-import { getUserPermissions } from 'data/permissions';
+import { useCanWriteSM } from 'hooks/useDSPermission';
 import { useNavigation } from 'hooks/useNavigation';
 
 export function AddNewCheckButton() {
   const navigate = useNavigation();
-  const { canWriteChecks } = getUserPermissions();
+  const canEdit = useCanWriteSM();
+
+  if (!canEdit) {
+    return null;
+  }
 
   return (
-    <Button
-      variant="primary"
-      onClick={() => navigate(ROUTES.ChooseCheckGroup)}
-      type="button"
-      disabled={!canWriteChecks}
-    >
+    <Button variant="primary" onClick={() => navigate(ROUTES.ChooseCheckGroup)} type="button">
       Add new check
     </Button>
   );

src/components/AppInitializer.tsx

@@ -6,11 +6,9 @@ import { DataTestIds } from 'test/dataTestIds';
 
 import { hasGlobalPermission } from 'utils';
 import { ROUTES } from 'routing/types';
-import { getUserPermissions } from 'data/permissions';
 import { useAppInitializer } from 'hooks/useAppInitializer';
 import { useMeta } from 'hooks/useMeta';
 import { MismatchedDatasourceModal } from 'components/MismatchedDatasourceModal';
-import { ContactAdminAlert } from 'page/ContactAdminAlert';
 
 interface Props {
   redirectTo?: ROUTES;
@@ -21,10 +19,7 @@ interface Props {
 export const AppInitializer = ({ redirectTo, buttonText }: PropsWithChildren<Props>) => {
   const { jsonData } = useMeta();
   const styles = useStyles2(getStyles);
-  const { canWritePlugin } = getUserPermissions();
-
-  const canReadDs = hasGlobalPermission(`datasources:read`);
-  const canInitialize = canWritePlugin && hasGlobalPermission(`datasources:create`);
+  const canInitialize = hasGlobalPermission(`datasources:create`);
 
   const {
     error,
@@ -40,13 +35,11 @@ export const AppInitializer = ({ redirectTo, buttonText }: PropsWithChildren<Pro
     setDataSouceModalOpen,
   } = useAppInitializer(redirectTo);
 
-  if (!canReadDs) {
-    return <ContactAdminAlert missingPermissions={['datasources:read']} />;
-  }
-
   if (!canInitialize) {
     return (
-      <ContactAdminAlert missingPermissions={['grafana-synthetic-monitoring-app.plugin:write', 'datasources:create']} />
+      <Alert title="" severity="info">
+        Contact your administrator to get you started.
+      </Alert>
     );
   }
 

src/components/Autosizer.tsx

@@ -0,0 +1,43 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { GrafanaTheme2 } from '@grafana/data';
+import { useStyles2 } from '@grafana/ui';
+import { css } from '@emotion/css';
+
+interface ChildrenArgs {
+  width: number;
+  height: number;
+}
+
+interface Props {
+  children: (dimensions: ChildrenArgs) => JSX.Element;
+}
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  fillContainer: css`
+    display: flex;
+    justify-content: center;
+    max-width: 1300px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+  `,
+});
+
+export const Autosizer = ({ children }: Props) => {
+  const el = useRef<HTMLDivElement>(null);
+  const styles = useStyles2(getStyles);
+  const [size, setSize] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    const rect = el.current?.getBoundingClientRect();
+    if (rect) {
+      setSize({ width: rect.width, height: rect.height });
+    }
+  }, [el]);
+
+  return (
+    <div className={styles.fillContainer} ref={el}>
+      {children(size)}
+    </div>
+  );
+};

src/components/CheckEditor/CheckProbes/CheckProbes.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { forwardRef, useMemo, useState } from 'react';
 import { Field, Stack } from '@grafana/ui';
 
 import { Probe } from 'types';
@@ -16,7 +16,7 @@ interface CheckProbesProps {
   invalid?: boolean;
   error?: string;
 }
-export function CheckProbes({ probes, availableProbes, onChange, error }: CheckProbesProps) {
+export const CheckProbes = forwardRef(({ probes, availableProbes, onChange, error }: CheckProbesProps) => {
   const [filteredProbes, setFilteredProbes] = useState<Probe[]>(availableProbes);
 
   const publicProbes = useMemo(() => filteredProbes.filter((probe) => probe.public), [filteredProbes]);
@@ -73,4 +73,6 @@ export function CheckProbes({ probes, availableProbes, onChange, error }: CheckP
       {showPrivateProbesDiscovery && <PrivateProbesAlert />}
     </div>
   );
-}
+});
+
+CheckProbes.displayName = 'CheckProbes';

src/components/CheckStatusInfo/CheckStatusInfo.tsx → src/components/CheckEditor/FormComponents/CheckStatusInfo.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { GrafanaTheme2 } from '@grafana/data';
-import { Icon, Stack, TextLink, useStyles2 } from '@grafana/ui';
+import { Badge, Icon, Stack, TextLink, useStyles2 } from '@grafana/ui';
 import { css } from '@emotion/css';
 
 import { CheckStatus } from 'types';
@@ -40,6 +40,14 @@ export const CheckStatusInfo = ({ description, docsLink }: CheckStatusInfoProps)
   );
 };
 
+export const NewStatusBadge = ({ status, className }: { status: CheckStatus; className?: string }) => {
+  if (![CheckStatus.EXPERIMENTAL, CheckStatus.PRIVATE_PREVIEW, CheckStatus.PUBLIC_PREVIEW].includes(status)) {
+    return null;
+  }
+
+  return <Badge text={'NEW'} color={'orange'} className={className} />;
+};
+
 const getStyles = (theme: GrafanaTheme2) => ({
   infoLink: css({
     background: `none`,

src/components/CheckEditor/ProbeOptions.tsx

@@ -26,20 +26,16 @@ export const ProbeOptions = ({ checkType, disabled }: ProbeOptionsProps) => {
       <Controller
         control={control}
         name="probes"
-        render={({ field }) => {
-          const { ref, ...fieldProps } = field; // ref is unused, this is to silence warnings
-
-          return (
-            <CheckProbes
-              {...fieldProps}
-              probes={field.value}
-              availableProbes={getAvailableProbes(probes, checkType)}
-              disabled={disabled}
-              invalid={Boolean(errors.probes)}
-              error={errors.probes?.message}
-            />
-          );
-        }}
+        render={({ field }) => (
+          <CheckProbes
+            {...field}
+            probes={field.value}
+            availableProbes={getAvailableProbes(probes, checkType)}
+            disabled={disabled}
+            invalid={Boolean(errors.probes)}
+            error={errors.probes?.message}
+          />
+        )}
       />
       <Field
         label="Frequency"