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/exhaustive-deps": "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"
       }
     }

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

@@ -11,7 +11,7 @@ export const Import: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
       height={size}
       {...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
           opacity="0.6"

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

@@ -283,8 +283,8 @@ const EmptyRecentList = memo(() => {
     <div className={styles.container}>
       <div>
         <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>
       </div>
       <div>

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

@@ -71,7 +71,7 @@ export class PluginHelp extends PureComponent<Props, State> {
     }
 
     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 === '') {

public/app/core/services/util_srv.ts

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

public/app/features/admin/AdminOrgsTable.tsx

@@ -40,7 +40,7 @@ export const AdminOrgsTable: FC<Props> = ({ orgs, onDelete }) => {
           title="Delete"
           body={
             <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>
             </div>
           }

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

@@ -36,7 +36,7 @@ export const ApiKeysAddedModal = (props: Props) => {
           <br />
           <br />
           <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>
         </div>
       </div>

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

@@ -31,8 +31,8 @@ export const SaveProvisionedDashboardForm: React.FC<SaveDashboardFormProps> = ({
     <>
       <VerticalGroup spacing="lg">
         <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 />
           <i>
             See{' '}

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

@@ -239,7 +239,7 @@ export class ShareSnapshot extends PureComponent<Props, State> {
         </InlineFieldRow>
 
         <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>
 
         <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>
               Transformations allow you to join, calculate, re-order, hide and rename your query results before being
               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 />
             </p>
           </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]);
 
   if (!props.variable) {
-    return <div>Couldn't load variable</div>;
+    return <div>Couldn&apos;t load variable</div>;
   }
 
   return (

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

@@ -256,7 +256,8 @@ export class ConfigEditor extends PureComponent<Props> {
             <p>
               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:
-              <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 />
               To support data isolation and security, make sure appropriate permissions are configured in InfluxDB.

public/app/plugins/datasource/influxdb/components/__snapshots__/ConfigEditor.test.tsx.snap

@@ -245,7 +245,7 @@ exports[`Render should disable basic auth password input 1`] = `
           <code>
             SHOW MEASUREMENTS ON _internal
           </code>
-           or 
+           or
           <code>
             SELECT * FROM "_internal".."database" LIMIT 10
           </code>
@@ -533,7 +533,7 @@ exports[`Render should hide basic auth fields when switch off 1`] = `
           <code>
             SHOW MEASUREMENTS ON _internal
           </code>
-           or 
+           or
           <code>
             SELECT * FROM "_internal".."database" LIMIT 10
           </code>
@@ -821,7 +821,7 @@ exports[`Render should hide white listed cookies input when browser access chose
           <code>
             SHOW MEASUREMENTS ON _internal
           </code>
-           or 
+           or
           <code>
             SELECT * FROM "_internal".."database" LIMIT 10
           </code>
@@ -1109,7 +1109,7 @@ exports[`Render should render component 1`] = `
           <code>
             SHOW MEASUREMENTS ON _internal
           </code>
-           or 
+           or
           <code>
             SELECT * FROM "_internal".."database" LIMIT 10
           </code>

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{' '}
                   <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 />
                 {`{ key = "value", key2 = "value" }`}
                 <br />
-                key="value", key2="value"
+                key=&quot;value&quot;, key2=&quot;value&quot;
                 <br />
                 key=value, key2=value
                 <br />