From f75bbe9f43ba33d111d09f1d6cfe1a1853bb5545 Mon Sep 17 00:00:00 2001
From: Tom Ratcliffe <tom.ratcliffe@grafana.com>
Date: Thu, 9 Jan 2025 10:02:52 +0000
Subject: [PATCH] Alerting: Add self closing comp rule to alerting eslint
 config (#98603)

---
 eslint.config.js                                              | 2 ++
 .../unified/components/permissions/ManagePermissions.tsx      | 2 +-
 .../alerting/unified/components/receivers/TemplateForm.tsx    | 2 +-
 .../alerting/unified/components/receivers/TemplatesTable.tsx  | 4 ++--
 .../components/receivers/form/GenerateAlertDataModal.tsx      | 2 +-
 .../components/receivers/form/fields/KeyValueMapInput.tsx     | 2 +-
 .../alert-rule-form/simplifiedRouting/AlertManagerRouting.tsx | 4 ++--
 .../notificaton-preview/NotificationPreviewByAlertManager.tsx | 4 ++--
 .../unified/components/rules/Filter/RulesFilter.v2.tsx        | 4 ++--
 .../unified/components/silences/SilencedAlertsTable.tsx       | 4 ++--
 .../unified/components/silences/SilencedAlertsTableRow.tsx    | 2 +-
 .../app/features/alerting/unified/rule-list/GroupedView.tsx   | 2 +-
 12 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/eslint.config.js b/eslint.config.js
index 7c1b5d23fb4..17be1ebc4e0 100644
--- a/eslint.config.js
+++ b/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',
     },
   },
diff --git a/public/app/features/alerting/unified/components/permissions/ManagePermissions.tsx b/public/app/features/alerting/unified/components/permissions/ManagePermissions.tsx
index 6bbe527fafd..aa82b4b794c 100644
--- a/public/app/features/alerting/unified/components/permissions/ManagePermissions.tsx
+++ b/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>
   );
 };
diff --git a/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx b/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx
index d9304ae90c6..96ca2dedd46 100644
--- a/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx
+++ b/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')}
diff --git a/public/app/features/alerting/unified/components/receivers/TemplatesTable.tsx b/public/app/features/alerting/unified/components/receivers/TemplatesTable.tsx
index 887cd36aa2e..f8bebea17f5 100644
--- a/public/app/features/alerting/unified/components/receivers/TemplatesTable.tsx
+++ b/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
diff --git a/public/app/features/alerting/unified/components/receivers/form/GenerateAlertDataModal.tsx b/public/app/features/alerting/unified/components/receivers/form/GenerateAlertDataModal.tsx
index 1ebc09f2c6f..417ccb4c3ba 100644
--- a/public/app/features/alerting/unified/components/receivers/form/GenerateAlertDataModal.tsx
+++ b/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>
diff --git a/public/app/features/alerting/unified/components/receivers/form/fields/KeyValueMapInput.tsx b/public/app/features/alerting/unified/components/receivers/form/fields/KeyValueMapInput.tsx
index 0bd18538cf1..5a1bccdd34e 100644
--- a/public/app/features/alerting/unified/components/receivers/form/fields/KeyValueMapInput.tsx
+++ b/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>
diff --git a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/AlertManagerRouting.tsx b/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/AlertManagerRouting.tsx
index 521a4c8e7c5..1d6b7c0b3f3 100644
--- a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/AlertManagerRouting.tsx
+++ b/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} />
diff --git a/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPreviewByAlertManager.tsx b/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPreviewByAlertManager.tsx
index 813187556cb..ddf78bef3fe 100644
--- a/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPreviewByAlertManager.tsx
+++ b/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">
diff --git a/public/app/features/alerting/unified/components/rules/Filter/RulesFilter.v2.tsx b/public/app/features/alerting/unified/components/rules/Filter/RulesFilter.v2.tsx
index 7faa69f1f83..1c682cc689e 100644
--- a/public/app/features/alerting/unified/components/rules/Filter/RulesFilter.v2.tsx
+++ b/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>
diff --git a/public/app/features/alerting/unified/components/silences/SilencedAlertsTable.tsx b/public/app/features/alerting/unified/components/silences/SilencedAlertsTable.tsx
index 2e18459f5b5..77525c01331 100644
--- a/public/app/features/alerting/unified/components/silences/SilencedAlertsTable.tsx
+++ b/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>
diff --git a/public/app/features/alerting/unified/components/silences/SilencedAlertsTableRow.tsx b/public/app/features/alerting/unified/components/silences/SilencedAlertsTableRow.tsx
index 9ccafe8402f..a867f5a4ed7 100644
--- a/public/app/features/alerting/unified/components/silences/SilencedAlertsTableRow.tsx
+++ b/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>
diff --git a/public/app/features/alerting/unified/rule-list/GroupedView.tsx b/public/app/features/alerting/unified/rule-list/GroupedView.tsx
index af2b4bfe265..37a608901ee 100644
--- a/public/app/features/alerting/unified/rule-list/GroupedView.tsx
+++ b/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) {