ESlint: React fixes part 1 (#29062)

* Eslint: allign with latest grafana-eslint-config

* fix ts

* Fix react/jsx-key

* Fix react/no-children-prop

* Fix react/jsx-no-target-blank

packages/grafana-ui/src/components/InfoBox/InfoBox.tsx

@@ -46,7 +46,7 @@ export const InfoBox = React.memo(
           </div>
           <div>{children}</div>
           {url && (
-            <a href={url} className={styles.docsLink} target="_blank">
+            <a href={url} className={styles.docsLink} target="_blank" rel="noreferrer">
               <Icon name="book" /> {urlTitle || 'Read more'}
             </a>
           )}

packages/grafana-ui/src/components/Logs/LogDetailsRow.tsx

@@ -189,6 +189,7 @@ function FieldLink({ link }: FieldLinkProps) {
     <a
       href={link.href}
       target={'_blank'}
+      rel="noreferrer"
       onClick={
         link.onClick
           ? event => {

packages/grafana-ui/src/components/Logs/LogRowContextProvider.test.tsx

@@ -164,7 +164,11 @@ describe('LogRowContextProvider', () => {
         return <></>;
       });
       await act(async () => {
-        await mount(<LogRowContextProvider row={row} getRowContext={getRowContextMock} children={mockedChildren} />);
+        await mount(
+          <LogRowContextProvider row={row} getRowContext={getRowContextMock}>
+            {mockedChildren}
+          </LogRowContextProvider>
+        );
       });
     });
   });

packages/grafana-ui/src/components/Select/SelectBase.tsx

@@ -273,7 +273,7 @@ export function SelectBase<T>({
                   menuIsOpen,
                 })
               );
-              return <IndicatorsContainer {...props} children={indicatorChildren} />;
+              return <IndicatorsContainer {...props}>{indicatorChildren}</IndicatorsContainer>;
             }
 
             return <IndicatorsContainer {...props} />;

packages/grafana-ui/src/components/Table/Table.tsx

@@ -195,8 +195,9 @@ export const Table: FC<Props> = memo((props: Props) => {
           {!noHeader && (
             <div>
               {headerGroups.map((headerGroup: HeaderGroup) => {
+                const { key, ...headerGroupProps } = headerGroup.getHeaderGroupProps();
                 return (
-                  <div className={tableStyles.thead} {...headerGroup.getHeaderGroupProps()}>
+                  <div className={tableStyles.thead} {...headerGroupProps} key={key}>
                     {headerGroup.headers.map((column: Column, index: number) =>
                       renderHeaderCell(column, tableStyles, data.fields[index])
                     )}