Feat: Add RBAC to Synthetic Monitoring

src/components/AddNewCheckButton/AddNewCheckButton.tsx

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

src/components/AppInitializer.tsx

@@ -6,9 +6,11 @@ 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;
@@ -19,7 +21,10 @@ interface Props {
 export const AppInitializer = ({ redirectTo, buttonText }: PropsWithChildren<Props>) => {
   const { jsonData } = useMeta();
   const styles = useStyles2(getStyles);
-  const canInitialize = hasGlobalPermission(`datasources:create`);
+  const { canWritePlugin } = getUserPermissions();
+
+  const canReadDs = hasGlobalPermission(`datasources:read`);
+  const canInitialize = canWritePlugin && hasGlobalPermission(`datasources:create`);
 
   const {
     error,
@@ -35,11 +40,13 @@ export const AppInitializer = ({ redirectTo, buttonText }: PropsWithChildren<Pro
     setDataSouceModalOpen,
   } = useAppInitializer(redirectTo);
 
+  if (!canReadDs) {
+    return <ContactAdminAlert missingPermissions={['datasources:read']} />;
+  }
+
   if (!canInitialize) {
     return (
-      <Alert title="" severity="info">
-        Contact your administrator to get you started.
-      </Alert>
+      <ContactAdminAlert missingPermissions={['grafana-synthetic-monitoring-app.plugin:write', 'datasources:create']} />
     );
   }
 

src/components/CheckForm/CheckForm.tsx

@@ -12,9 +12,10 @@ import { createNavModel } from 'utils';
 import { ROUTES } from 'routing/types';
 import { generateRoutePath } from 'routing/utils';
 import { AdHocCheckResponse } from 'datasource/responses.types';
+import { getUserPermissions } from 'data/permissions';
 import { useCheckTypeGroupOption } from 'hooks/useCheckTypeGroupOptions';
 import { useCheckTypeOptions } from 'hooks/useCheckTypeOptions';
-import { useCanReadLogs, useCanWriteSM } from 'hooks/useDSPermission';
+import { useCanReadLogs } from 'hooks/useDSPermission';
 import { useLimits } from 'hooks/useLimits';
 import { toFormValues } from 'components/CheckEditor/checkFormTransformations';
 import { CheckJobName } from 'components/CheckEditor/FormComponents/CheckJobName';
@@ -72,7 +73,7 @@ type CheckFormProps = {
 };
 
 export const CheckForm = ({ check, disabled }: CheckFormProps) => {
-  const canEdit = useCanWriteSM();
+  const { canWriteChecks } = getUserPermissions();
   const canReadLogs = useCanReadLogs();
   const [openTestCheckModal, setOpenTestCheckModal] = useState(false);
   const [adhocTestData, setAdhocTestData] = useState<AdHocCheckResponse>();
@@ -90,7 +91,7 @@ export const CheckForm = ({ check, disabled }: CheckFormProps) => {
     isOverCheckLimit ||
     (checkType === CheckType.Browser && isOverBrowserLimit) ||
     ([CheckType.MULTI_HTTP, CheckType.Scripted].includes(checkType) && isOverScriptedLimit);
-  const isDisabled = disabled || !canEdit || getLimitDisabled({ isExistingCheck, isLoading, overLimit });
+  const isDisabled = disabled || !canWriteChecks || getLimitDisabled({ isExistingCheck, isLoading, overLimit });
 
   const formMethods = useForm<CheckFormValues>({
     defaultValues: toFormValues(initialCheck, checkType),

src/components/DeleteProbeButton/DeleteProbeButton.tsx

@@ -19,8 +19,10 @@ export function DeleteProbeButton({ probe, onDeleteSuccess: _onDeleteSuccess }:
   }, [_onDeleteSuccess]);
 
   const { mutateAsync: deleteProbe, isPending } = useDeleteProbe({ onSuccess: onDeleteSuccess });
-  const canEdit = useCanEditProbe(probe);
-  const canDelete = canEdit && !probe.checks.length;
+
+  const { canDeleteProbes } = useCanEditProbe();
+
+  const canDelete = canDeleteProbes && !probe.checks.length;
   const styles = getStyles();
   const [error, setError] = useState<undefined | { name: string; message: string }>();
 
@@ -37,7 +39,7 @@ export function DeleteProbeButton({ probe, onDeleteSuccess: _onDeleteSuccess }:
   };
 
   if (!canDelete) {
-    const tooltipContent = canEdit ? (
+    const tooltipContent = canDeleteProbes ? (
       <>
         Unable to delete the probe because it is currently in use.
         <br />
@@ -53,7 +55,7 @@ export function DeleteProbeButton({ probe, onDeleteSuccess: _onDeleteSuccess }:
 
     // Both tooltip component and button prob is used for accessibility reasons
     return (
-      <Tooltip content={tooltipContent} interactive={canEdit && !canDelete}>
+      <Tooltip content={tooltipContent} interactive={canDeleteProbes && !canDelete}>
         <Button type="button" variant="destructive" tooltip={tooltipContent} disabled>
           Delete probe
         </Button>

src/components/LinkedDatasourceView.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Alert, Card, Tag } from '@grafana/ui';
 
-import { useCanWriteLogs, useCanWriteMetrics, useCanWriteSM } from 'hooks/useDSPermission';
+import { getUserPermissions } from 'data/permissions';
+import { useCanWriteLogs, useCanWriteMetrics } from 'hooks/useDSPermission';
 import { useLogsDS } from 'hooks/useLogsDS';
 import { useMetricsDS } from 'hooks/useMetricsDS';
 import { useSMDS } from 'hooks/useSMDS';
@@ -15,14 +16,14 @@ export const LinkedDatasourceView = ({ type }: LinkedDatasourceViewProps) => {
   const logsDS = useLogsDS();
   const smDS = useSMDS();
 
-  const canEditSM = useCanWriteSM();
+  const { canWriteSM } = getUserPermissions();
   const canEditLogs = useCanWriteLogs();
   const canEditMetrics = useCanWriteMetrics();
 
   const canEditMap = {
     prometheus: canEditMetrics,
     loki: canEditLogs,
-    'synthetic-monitoring-datasource': canEditSM,
+    'synthetic-monitoring-datasource': canWriteSM,
   };
 
   const dsMap = {

src/components/ProbeCard/ProbeCard.test.tsx

@@ -6,7 +6,7 @@ import { userEvent } from '@testing-library/user-event';
 import { DataTestIds } from 'test/dataTestIds';
 import { OFFLINE_PROBE, ONLINE_PROBE, PRIVATE_PROBE, PUBLIC_PROBE } from 'test/fixtures/probes';
 import { render } from 'test/render';
-import { probeToExtendedProbe, runTestAsViewer } from 'test/utils';
+import { probeToExtendedProbe, runTestAsRBACReader, runTestAsViewer } from 'test/utils';
 
 import { type ExtendedProbe } from 'types';
 import { ROUTES } from 'routing/types';
@@ -92,6 +92,18 @@ it(`Displays the correct information for a private probe as a viewer`, async ()
   expect(button).toHaveTextContent('View');
 });
 
+it(`Displays the correct information for a private probe as a RBAC viewer`, async () => {
+  runTestAsRBACReader();
+  const probe = probeToExtendedProbe(PRIVATE_PROBE);
+
+  render(<ProbeCard probe={probe} />);
+  await screen.findByText(probe.name, { exact: false });
+
+  const button = screen.getByTestId('probe-card-action-button');
+  expect(button).toBeInTheDocument();
+  expect(button).toHaveTextContent('View');
+});
+
 it(`Displays the correct information for a public probe`, async () => {
   const probe = probeToExtendedProbe(PUBLIC_PROBE);
 

src/components/ProbeCard/ProbeCard.tsx

@@ -15,8 +15,8 @@ import { ProbeLabels } from './ProbeLabels';
 import { ProbeStatus } from './ProbeStatus';
 
 export const ProbeCard = ({ probe }: { probe: ExtendedProbe }) => {
-  const canEdit = useCanEditProbe(probe);
-  const probeEditHref = generateRoutePath(canEdit ? ROUTES.EditProbe : ROUTES.ViewProbe, { id: probe.id! });
+  const { canWriteProbes } = useCanEditProbe(probe);
+  const probeEditHref = generateRoutePath(canWriteProbes ? ROUTES.EditProbe : ROUTES.ViewProbe, { id: probe.id! });
   const labelsString = labelsToString(probe.labels);
   const styles = useStyles2(getStyles2);
 
@@ -55,7 +55,7 @@ export const ProbeCard = ({ probe }: { probe: ExtendedProbe }) => {
       </Card.Description>
 
       <Card.Actions>
-        {canEdit ? (
+        {canWriteProbes ? (
           <>
             <LinkButton
               data-testid="probe-card-action-button"

src/components/ProbeEditor/ProbeEditor.test.tsx

@@ -3,7 +3,7 @@ import { config } from '@grafana/runtime';
 import { screen } from '@testing-library/react';
 import { PRIVATE_PROBE, PUBLIC_PROBE } from 'test/fixtures/probes';
 import { render } from 'test/render';
-import { fillProbeForm, probeToExtendedProbe, runTestAsViewer, UPDATED_VALUES } from 'test/utils';
+import { fillProbeForm, probeToExtendedProbe, runTestAsRBACReader, runTestAsViewer, UPDATED_VALUES } from 'test/utils';
 
 import { ExtendedProbe, FeatureName, Probe } from 'types';
 import { TEMPLATE_PROBE } from 'page/NewProbe';
@@ -108,6 +108,12 @@ it('the form is uneditable when logged in as a viewer', async () => {
   await assertUneditable();
 });
 
+it('the form is uneditable when logged in as a RBAC viewer', async () => {
+  runTestAsRBACReader();
+  await renderProbeEditor();
+  await assertUneditable();
+});
+
 it('the form actions are unavailable when viewing a public probe', async () => {
   await renderProbeEditor({ probe: PUBLIC_PROBE });
   await assertNoActions();
@@ -124,6 +130,12 @@ it('should render the form in read mode when passing `forceReadMode`', async ()
   await assertUneditable();
 });
 
+it('the form actions are unavailable as a RBAC viewer', async () => {
+  runTestAsRBACReader();
+  await renderProbeEditor();
+  await assertNoActions();
+});
+
 async function assertUneditable() {
   const nameInput = await screen.findByLabelText('Probe Name', { exact: false });
   expect(nameInput).toBeDisabled();

src/components/ProbeEditor/ProbeEditor.tsx

@@ -36,8 +36,8 @@ export const ProbeEditor = ({
   forceViewMode, // When true, the form is in view mode
 }: ProbeEditorProps) => {
   const styles = useStyles2(getStyles);
-  const canEdit = useCanEditProbe(probe);
-  const writeMode = canEdit && !forceViewMode;
+  const { canWriteProbes } = useCanEditProbe(probe);
+  const writeMode = canWriteProbes && !forceViewMode;
   const form = useForm<Probe>({ defaultValues: probe, resolver: zodResolver(ProbeSchema) });
   const { latitude, longitude } = form.watch();
   const handleSubmit = form.handleSubmit((formValues: Probe) => onSubmit(formValues));
@@ -164,7 +164,7 @@ export const ProbeEditor = ({
                     />
                   </Field>
                 </div>
-                {canEdit && <LabelField<Probe> disabled={!writeMode} labelDestination={'probe'} />}
+                {canWriteProbes && <LabelField<Probe> disabled={!writeMode} labelDestination={'probe'} />}
                 <div className={styles.marginBottom}>
                   <Legend>Capabilities</Legend>
                   <HorizontalCheckboxField
@@ -189,7 +189,7 @@ export const ProbeEditor = ({
                   </FeatureFlag>
                 </div>
                 <div className={styles.buttonWrapper}>
-                  {canEdit && (
+                  {canWriteProbes && (
                     <>
                       <Button
                         icon={loading ? 'fa fa-spinner' : undefined}