Alerting: Add self closing comp rule to alerting eslint config (#98603)

eslint.config.js

@@ -249,6 +249,7 @@ module.exports = [
     name: 'grafana/alerting-overrides',
     plugins: {
       unicorn: unicornPlugin,
+      react: reactPlugin,
     },
     files: ['public/app/features/alerting/**/*.{ts,tsx,js,jsx}'],
     rules: {
@@ -256,6 +257,7 @@ module.exports = [
       'dot-notation': 'error',
       'prefer-const': 'error',
       'react/no-unused-prop-types': 'error',
+      'react/self-closing-comp': 'error',
       'unicorn/no-unused-properties': 'error',
     },
   },

public/app/features/alerting/unified/components/permissions/ManagePermissions.tsx

@@ -30,7 +30,7 @@ export const ManagePermissionsDrawer = ({
   const defaultTitle = t('alerting.manage-permissions.title', 'Manage permissions');
   return (
     <Drawer onClose={onClose} title={title || defaultTitle} subtitle={resourceName}>
-      <Permissions {...permissionsProps} canSetPermissions></Permissions>
+      <Permissions {...permissionsProps} canSetPermissions />
     </Drawer>
   );
 };

public/app/features/alerting/unified/components/receivers/TemplateForm.tsx

@@ -324,7 +324,7 @@ export const TemplateForm = ({ originalTemplate, prefill, alertmanager }: Props)
               {isGrafanaAlertManager && (
                 <>
                   <div {...rowSplitter.secondaryProps}>
-                    <div {...rowSplitter.splitterProps}></div>
+                    <div {...rowSplitter.splitterProps} />
                     <TemplatePreview
                       payload={payload}
                       templateName={watch('title')}

public/app/features/alerting/unified/components/receivers/TemplatesTable.tsx

@@ -61,7 +61,7 @@ export const TemplatesTable = ({ alertManagerName, templates }: Props) => {
         </colgroup>
         <thead>
           <tr>
-            <th></th>
+            <th />
             <th>Template group</th>
             <Authorize
               actions={[
@@ -189,7 +189,7 @@ function TemplateRow({ notificationTemplate, idx, alertManagerName, onDeleteClic
       </tr>
       {isExpanded && (
         <tr className={idx % 2 === 0 ? tableStyles.evenRow : undefined}>
-          <td></td>
+          <td />
           <td colSpan={2}>
             <DetailsField label="" horizontal={true}>
               <TemplateEditor

public/app/features/alerting/unified/components/receivers/form/GenerateAlertDataModal.tsx

@@ -122,7 +122,7 @@ export const GenerateAlertDataModal = ({ isOpen, onDismiss, onAccept }: Props) =
               </Stack>
             </Card>
           </>
-          <div className={styles.onSubmitWrapper}></div>
+          <div className={styles.onSubmitWrapper} />
           {alerts.length > 0 && (
             <Stack direction="column" gap={1}>
               <h5> Review alert data to add to the payload:</h5>

public/app/features/alerting/unified/components/receivers/form/fields/KeyValueMapInput.tsx

@@ -47,7 +47,7 @@ export const KeyValueMapInput = ({ value, onChange, readOnly = false }: Props) =
             <tr>
               <th>Name</th>
               <th>Value</th>
-              {!readOnly && <th></th>}
+              {!readOnly && <th />}
             </tr>
           </thead>
           <tbody>

public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/AlertManagerRouting.tsx

@@ -40,13 +40,13 @@ export function AlertManagerManualRouting({ alertManager }: AlertManagerManualRo
   return (
     <Stack direction="column">
       <Stack direction="row" alignItems="center">
-        <div className={styles.firstAlertManagerLine}></div>
+        <div className={styles.firstAlertManagerLine} />
         <div className={styles.alertManagerName}>
           Alertmanager:
           <img src={alertManager.imgUrl} alt="Alert manager logo" className={styles.img} />
           {alertManagerName}
         </div>
-        <div className={styles.secondAlertManagerLine}></div>
+        <div className={styles.secondAlertManagerLine} />
       </Stack>
       <Stack direction="row" gap={1} alignItems="center">
         <ContactPointSelector alertManager={alertManagerName} onSelectContactPoint={onSelectContactPoint} />

public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPreviewByAlertManager.tsx

@@ -49,13 +49,13 @@ function NotificationPreviewByAlertManager({
     <div className={styles.alertManagerRow}>
       {!onlyOneAM && (
         <Stack direction="row" alignItems="center">
-          <div className={styles.firstAlertManagerLine}></div>
+          <div className={styles.firstAlertManagerLine} />
           <div className={styles.alertManagerName}>
             <Trans i18nKey="alerting.notification-preview.alertmanager">Alertmanager:</Trans>
             <img src={alertManagerSource.imgUrl} alt="" className={styles.img} />
             {alertManagerSource.name}
           </div>
-          <div className={styles.secondAlertManagerLine}></div>
+          <div className={styles.secondAlertManagerLine} />
         </Stack>
       )}
       <Stack gap={1} direction="column">

public/app/features/alerting/unified/components/rules/Filter/RulesFilter.v2.tsx

@@ -84,7 +84,7 @@ const FilterOptions = () => {
         <Label>
           <Trans i18nKey="alerting.search.property.namespace">Folder / Namespace</Trans>
         </Label>
-        <Select options={[]} onChange={() => {}}></Select>
+        <Select options={[]} onChange={() => {}} />
         <Label>
           <Trans i18nKey="alerting.search.property.rule-name">Alerting rule name</Trans>
         </Label>
@@ -100,7 +100,7 @@ const FilterOptions = () => {
         <Label>
           <Trans i18nKey="alerting.search.property.data-source">Data source</Trans>
         </Label>
-        <Select options={[]} onChange={() => {}}></Select>
+        <Select options={[]} onChange={() => {}} />
         <Label>
           <Trans i18nKey="alerting.search.property.state">State</Trans>
         </Label>

public/app/features/alerting/unified/components/silences/SilencedAlertsTable.tsx

@@ -28,11 +28,11 @@ const SilencedAlertsTable = ({ silencedAlerts }: Props) => {
         </colgroup>
         <thead>
           <tr>
-            <th></th>
+            <th />
             <th>
               <Trans i18nKey="silences-table.header.state">State</Trans>
             </th>
-            <th></th>
+            <th />
             <th>
               <Trans i18nKey="silences-table.header.alert-name">Alert name</Trans>
             </th>

public/app/features/alerting/unified/components/silences/SilencedAlertsTableRow.tsx

@@ -40,7 +40,7 @@ export const SilencedAlertsTableRow = ({ alert, className }: Props) => {
       </tr>
       {!isCollapsed && (
         <tr className={className}>
-          <td></td>
+          <td />
           <td colSpan={5}>
             <AlertLabels labels={alert.labels} size="sm" />
           </td>

public/app/features/alerting/unified/rule-list/GroupedView.tsx

@@ -43,7 +43,7 @@ interface DataSourceLoaderProps {
 }
 
 export function GrafanaDataSourceLoader() {
-  return <DataSourceSection name="Grafana" application="grafana" uid="grafana" isLoading={true}></DataSourceSection>;
+  return <DataSourceSection name="Grafana" application="grafana" uid="grafana" isLoading={true} />;
 }
 
 export function DataSourceLoader({ uid, name }: DataSourceLoaderProps) {