Chore: Enable remaining eslint-plugin-react rules (#29519)

* Chore: Enable eslint react/no-render-return-value rule

Eanble the rule and remove the unused render return

part of: #29201

* Chore: Enable eslint react/no-children-prop rule

Not linting issues after turning on this. No other file changes requried

part of: #29201

* Chore: Enable eslint react/no-unknown-property rule

Correct enable-background to enableBackground

part of: #29201

* Chore: Enable eslint react/no-unescaped-entities rule

Replaced " with " replaced ' with '

part of: #29201

.eslintrc

@@ -15,10 +15,6 @@
         "react-hooks/rules-of-hooks": "off",
         "react-hooks/rules-of-hooks": "off",
         "react-hooks/exhaustive-deps": "off",
         "react-hooks/exhaustive-deps": "off",
         "react/prop-types": "off",
         "react/prop-types": "off",
-        "react/no-unescaped-entities": "off",
-        "react/no-unknown-property": "off",
-        "react/no-children-prop": "off",
-        "react/no-render-return-value": "off",
         "no-only-tests/no-only-tests": "error"
         "no-only-tests/no-only-tests": "error"
       }
       }
     }
     }

packages/grafana-ui/src/components/Icon/assets/Import.tsx

@@ -11,7 +11,7 @@ export const Import: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
       height={size}
       height={size}
       {...rest}
       {...rest}
     >
     >
-      <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24">
+      <svg xmlns="http://www.w3.org/2000/svg" enableBackground="new 0 0 24 24" viewBox="0 0 24 24">
         <path d="M19,22H5c-1.65611-0.00181-2.99819-1.34389-3-3v-4c0-0.55229,0.44772-1,1-1s1,0.44771,1,1v4c0.00037,0.55213,0.44787,0.99963,1,1h14c0.55213-0.00037,0.99963-0.44787,1-1v-4c0-0.55229,0.44772-1,1-1s1,0.44771,1,1v4C21.99819,20.65611,20.65611,21.99819,19,22z" />
         <path d="M19,22H5c-1.65611-0.00181-2.99819-1.34389-3-3v-4c0-0.55229,0.44772-1,1-1s1,0.44771,1,1v4c0.00037,0.55213,0.44787,0.99963,1,1h14c0.55213-0.00037,0.99963-0.44787,1-1v-4c0-0.55229,0.44772-1,1-1s1,0.44771,1,1v4C21.99819,20.65611,20.65611,21.99819,19,22z" />
         <path
         <path
           opacity="0.6"
           opacity="0.6"

packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx

@@ -283,8 +283,8 @@ const EmptyRecentList = memo(() => {
     <div className={styles.container}>
     <div className={styles.container}>
       <div>
       <div>
         <span>
         <span>
-          It looks like you haven't used this timer picker before. As soon as you enter some time intervals, recently
-          used intervals will appear here.
+          It looks like you haven&apos;t used this timer picker before. As soon as you enter some time intervals,
+          recently used intervals will appear here.
         </span>
         </span>
       </div>
       </div>
       <div>
       <div>

public/app/core/components/PluginHelp/PluginHelp.tsx

@@ -71,7 +71,7 @@ export class PluginHelp extends PureComponent<Props, State> {
     }
     }
 
 
     if (isError) {
     if (isError) {
-      return <h3>'Error occurred when loading help'</h3>;
+      return <h3>&apos;Error occurred when loading help&apos;</h3>;
     }
     }
 
 
     if (type === 'panel_help' && help === '') {
     if (type === 'panel_help' && help === '') {

public/app/core/services/util_srv.ts

@@ -39,7 +39,7 @@ export class UtilSrv {
 
 
     const elem = React.createElement(provideTheme(AngularModalProxy), modalProps);
     const elem = React.createElement(provideTheme(AngularModalProxy), modalProps);
     this.reactModalRoot.appendChild(this.reactModalNode);
     this.reactModalRoot.appendChild(this.reactModalNode);
-    return ReactDOM.render(elem, this.reactModalNode);
+    ReactDOM.render(elem, this.reactModalNode);
   }
   }
 
 
   onReactModalDismiss = () => {
   onReactModalDismiss = () => {

public/app/features/admin/AdminOrgsTable.tsx

@@ -40,7 +40,7 @@ export const AdminOrgsTable: FC<Props> = ({ orgs, onDelete }) => {
           title="Delete"
           title="Delete"
           body={
           body={
             <div>
             <div>
-              Are you sure you want to delete '{deleteOrg.name}'?
+              Are you sure you want to delete &apos;{deleteOrg.name}&apos;?
               <br /> <small>All dashboards for this organization will be removed!</small>
               <br /> <small>All dashboards for this organization will be removed!</small>
             </div>
             </div>
           }
           }

public/app/features/api-keys/ApiKeysAddedModal.tsx

@@ -36,7 +36,7 @@ export const ApiKeysAddedModal = (props: Props) => {
           <br />
           <br />
           <br />
           <br />
           <pre className="small">
           <pre className="small">
-            curl -H "Authorization: Bearer {props.apiKey}" {props.rootPath}/api/dashboards/home
+            curl -H &quot;Authorization: Bearer {props.apiKey}&quot; {props.rootPath}/api/dashboards/home
           </pre>
           </pre>
         </div>
         </div>
       </div>
       </div>

public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx

@@ -31,8 +31,8 @@ export const SaveProvisionedDashboardForm: React.FC<SaveDashboardFormProps> = ({
     <>
     <>
       <VerticalGroup spacing="lg">
       <VerticalGroup spacing="lg">
         <small>
         <small>
-          This dashboard cannot be saved from Grafana's UI since it has been provisioned from another source. Copy the
-          JSON or save it to a file below. Then you can update your dashboard in corresponding provisioning source.
+          This dashboard cannot be saved from Grafana&apos;s UI since it has been provisioned from another source. Copy
+          the JSON or save it to a file below. Then you can update your dashboard in corresponding provisioning source.
           <br />
           <br />
           <i>
           <i>
             See{' '}
             See{' '}

public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx

@@ -239,7 +239,7 @@ export class ShareSnapshot extends PureComponent<Props, State> {
         </InlineFieldRow>
         </InlineFieldRow>
 
 
         <p className="share-modal-info-text">
         <p className="share-modal-info-text">
-          You may need to configure the timeout value if it takes a long time to collect your dashboard's metrics.
+          You may need to configure the timeout value if it takes a long time to collect your dashboard&apos;s metrics.
         </p>
         </p>
 
 
         <InlineFieldRow className="share-modal-options">
         <InlineFieldRow className="share-modal-options">

public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx

@@ -215,8 +215,8 @@ export class TransformationsEditor extends React.PureComponent<TransformationsEd
             <p>
             <p>
               Transformations allow you to join, calculate, re-order, hide and rename your query results before being
               Transformations allow you to join, calculate, re-order, hide and rename your query results before being
               visualized. <br />
               visualized. <br />
-              Many transforms are not suitable if you're using the Graph visualization as it currently only supports
-              time series. <br />
+              Many transforms are not suitable if you&apos;re using the Graph visualization as it currently only
+              supports time series. <br />
               It can help to switch to Table visualization to understand what a transformation is doing. <br />
               It can help to switch to Table visualization to understand what a transformation is doing. <br />
             </p>
             </p>
           </FeatureInfoBox>
           </FeatureInfoBox>

public/app/features/variables/pickers/PickerRenderer.tsx

@@ -12,7 +12,7 @@ export const PickerRenderer: FunctionComponent<Props> = props => {
   const PickerToRender = useMemo(() => variableAdapters.get(props.variable.type).picker, [props.variable]);
   const PickerToRender = useMemo(() => variableAdapters.get(props.variable.type).picker, [props.variable]);
 
 
   if (!props.variable) {
   if (!props.variable) {
-    return <div>Couldn't load variable</div>;
+    return <div>Couldn&apos;t load variable</div>;
   }
   }
 
 
   return (
   return (

public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx

@@ -256,7 +256,8 @@ export class ConfigEditor extends PureComponent<Props> {
             <p>
             <p>
               Setting the database for this datasource does not deny access to other databases. The InfluxDB query
               Setting the database for this datasource does not deny access to other databases. The InfluxDB query
               syntax allows switching the database in the query. For example:
               syntax allows switching the database in the query. For example:
-              <code>SHOW MEASUREMENTS ON _internal</code> or <code>SELECT * FROM "_internal".."database" LIMIT 10</code>
+              <code>SHOW MEASUREMENTS ON _internal</code> or
+              <code>SELECT * FROM &quot;_internal&quot;..&quot;database&quot; LIMIT 10</code>
               <br />
               <br />
               <br />
               <br />
               To support data isolation and security, make sure appropriate permissions are configured in InfluxDB.
               To support data isolation and security, make sure appropriate permissions are configured in InfluxDB.

public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx

@@ -137,7 +137,7 @@ export class PromQueryEditor extends PureComponent<Props, State> {
                 <>
                 <>
                   An additional lower limit for the step parameter of the Prometheus query and for the{' '}
                   An additional lower limit for the step parameter of the Prometheus query and for the{' '}
                   <code>$__interval</code> and <code>$__rate_interval</code> variables. The limit is absolute and not
                   <code>$__interval</code> and <code>$__rate_interval</code> variables. The limit is absolute and not
-                  modified by the "Resolution" setting.
+                  modified by the &quot;Resolution&quot; setting.
                 </>
                 </>
               }
               }
             >
             >

public/app/plugins/datasource/testdata/QueryEditor.tsx

@@ -168,7 +168,7 @@ export const QueryEditor = ({ query, datasource, onChange, onRunQuery }: Props)
                 <br />
                 <br />
                 {`{ key = "value", key2 = "value" }`}
                 {`{ key = "value", key2 = "value" }`}
                 <br />
                 <br />
-                key="value", key2="value"
+                key=&quot;value&quot;, key2=&quot;value&quot;
                 <br />
                 <br />
                 key=value, key2=value
                 key=value, key2=value
                 <br />
                 <br />