[v10.4.x] Azure Monitor: Add validation for namespace field in AdvancedResourcePicker when entering a forward slash (#89313)

Azure Monitor: Add validation for namespace field in AdvancedResourcePicker when entering a forward slash (#89288)

* Add validation for namespace field in AdvancedResourcePicker when entering a forward slash

* Add test

* Fix formatting

* Remove unused import

(cherry picked from commit 0bdd613f3b)

Co-authored-by: Adam Yeats <16296989+adamyeats@users.noreply.github.com>

public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/AdvancedResourcePicker.test.tsx

@@ -101,4 +101,17 @@ describe('AdvancedResourcePicker', () => {
     expect(screen.getByDisplayValue('rg2')).toBeInTheDocument();
     expect(screen.getByDisplayValue('res2')).toBeInTheDocument();
   });
+
+  it('should display an error when the namespace field ends in a /', async () => {
+    const onChange = jest.fn();
+
+    render(
+      <AdvancedResourcePicker
+        onChange={onChange}
+        resources={[{ metricNamespace: 'Microsoft.OperationalInsights/workspaces/' }]}
+      />
+    );
+
+    expect(screen.getByText('Namespace cannot end with a "/"')).toBeInTheDocument();
+  });
 });

public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/AdvancedResourcePicker.tsx

@@ -81,6 +81,8 @@ const AdvancedResourcePicker = ({ resources, onChange }: ResourcePickerProps<Azu
         htmlFor={`input-advanced-resource-picker-metricNamespace`}
         labelWidth={15}
         data-testid={selectors.components.queryEditor.resourcePicker.advanced.namespace.input}
+        invalid={resources[0]?.metricNamespace?.endsWith('/')}
+        error={'Namespace cannot end with a "/"'}
       >
         <Input
           id={`input-advanced-resource-picker-metricNamespace`}