Activate useful @typescript-eslint rules & fix warnings in `design-system/` and related components (#7759)

7 files changed, 25 insertions, 15 deletions

diff --git a/server/sonar-web/src/main/js/app/components/global-search/GlobalSearch.tsx b/server/sonar-web/src/main/js/app/components/global-search/GlobalSearch.tsx
index 24b96e70a5d..182e8ae11dd 100644
--- a/server/sonar-web/src/main/js/app/components/global-search/GlobalSearch.tsx
+++ b/server/sonar-web/src/main/js/app/components/global-search/GlobalSearch.tsx
@@ -64,7 +64,7 @@ const MIN_SEARCH_QUERY_LENGTH = 2;
 export class GlobalSearch extends React.PureComponent<Props, State> {
   input?: HTMLInputElement | null;
   node?: HTMLElement | null;
-  nodes: Dict<HTMLElement>;
+  nodes: Dict<HTMLElement | undefined>;
   mounted = false;
 
   constructor(props: Props) {
@@ -109,11 +109,9 @@ export class GlobalSearch extends React.PureComponent<Props, State> {
   handleFocus = () => {
     if (!this.state.open) {
       // simulate click to close any other dropdowns
-      const body = document.documentElement;
-      if (body) {
-        body.click();
-      }
+      document.documentElement.click();
     }
+
     this.openSearch();
   };
 
@@ -143,7 +141,7 @@ export class GlobalSearch extends React.PureComponent<Props, State> {
 
   getPlainComponentsList = (results: Results, more: More) =>
     sortQualifiers(Object.keys(results)).reduce((components, qualifier) => {
-      const next = [...components, ...results[qualifier].map((component) => component.key)];
+      const next = [...components, ...(results[qualifier] ?? []).map((component) => component.key)];
       if (more[qualifier]) {
         next.push('qualifier###' + qualifier);
       }
@@ -203,7 +201,7 @@ export class GlobalSearch extends React.PureComponent<Props, State> {
           more: { ...state.more, [qualifier]: 0 },
           results: {
             ...state.results,
-            [qualifier]: uniqBy([...state.results[qualifier], ...moreResults], 'key'),
+            [qualifier]: uniqBy([...(state.results[qualifier] ?? []), ...moreResults], 'key'),
           },
           selected: moreResults.length > 0 ? moreResults[0].key : state.selected,
         }));
@@ -266,6 +264,7 @@ export class GlobalSearch extends React.PureComponent<Props, State> {
   scrollToSelected = () => {
     if (this.state.selected) {
       const node = this.nodes[this.state.selected];
+
       if (node && this.node) {
         scrollToElement(node, {
           topOffset: 30,
diff --git a/server/sonar-web/src/main/js/app/components/global-search/GlobalSearchResult.tsx b/server/sonar-web/src/main/js/app/components/global-search/GlobalSearchResult.tsx
index 8e112b048e7..71779ed36cd 100644
--- a/server/sonar-web/src/main/js/app/components/global-search/GlobalSearchResult.tsx
+++ b/server/sonar-web/src/main/js/app/components/global-search/GlobalSearchResult.tsx
@@ -45,7 +45,9 @@ export default class GlobalSearchResult extends React.PureComponent<Props> {
         className={classNames('sw-flex sw-flex-col sw-items-start sw-space-y-1', {
           active: selected,
         })}
-        innerRef={(node: HTMLAnchorElement | null) => this.props.innerRef(component.key, node)}
+        innerRef={(node: HTMLAnchorElement | null) => {
+          this.props.innerRef(component.key, node);
+        }}
         key={component.key}
         onClick={this.props.onClose}
         onPointerEnter={this.doSelect}
diff --git a/server/sonar-web/src/main/js/app/components/global-search/GlobalSearchResults.tsx b/server/sonar-web/src/main/js/app/components/global-search/GlobalSearchResults.tsx
index 5ee4ca6f24c..fb1ef0017e3 100644
--- a/server/sonar-web/src/main/js/app/components/global-search/GlobalSearchResults.tsx
+++ b/server/sonar-web/src/main/js/app/components/global-search/GlobalSearchResults.tsx
@@ -29,7 +29,7 @@ export interface Props {
   more: More;
   onMoreClick: (qualifier: string) => void;
   onSelect: (componentKey: string) => void;
-  renderNoResults: () => React.ReactElement<any>;
+  renderNoResults: () => React.ReactElement;
   renderResult: (component: ComponentResult) => React.ReactNode;
   results: Results;
   selected?: string;
@@ -42,8 +42,10 @@ export default function GlobalSearchResults(props: Props): React.ReactElement<Pr
 
   sortQualifiers(qualifiers).forEach((qualifier) => {
     const components = props.results[qualifier];
-    if (components.length > 0) {
+
+    if (components?.length) {
       const more = props.more[qualifier];
+
       renderedComponents.push(
         <li key={`group-${qualifier}`}>
           <ul key={`header-${qualifier}`} aria-labelledby={translate('qualifiers', qualifier)}>
diff --git a/server/sonar-web/src/main/js/app/components/global-search/GlobalSearchShowMore.tsx b/server/sonar-web/src/main/js/app/components/global-search/GlobalSearchShowMore.tsx
index f16d54b2f57..ded1f414256 100644
--- a/server/sonar-web/src/main/js/app/components/global-search/GlobalSearchShowMore.tsx
+++ b/server/sonar-web/src/main/js/app/components/global-search/GlobalSearchShowMore.tsx
@@ -54,7 +54,9 @@ export default class GlobalSearchShowMore extends React.PureComponent<Props> {
       <ItemButton
         className={classNames({ active: selected })}
         disabled={!allowMore}
-        onClick={(e: React.MouseEvent<HTMLButtonElement>) => this.handleMoreClick(e, qualifier)}
+        onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+          this.handleMoreClick(e, qualifier);
+        }}
         onPointerEnter={() => {
           this.handleMouseEnter(qualifier);
         }}
diff --git a/server/sonar-web/src/main/js/app/components/global-search/utils.ts b/server/sonar-web/src/main/js/app/components/global-search/utils.ts
index 51f9fc636e5..4fbc1c4b1db 100644
--- a/server/sonar-web/src/main/js/app/components/global-search/utils.ts
+++ b/server/sonar-web/src/main/js/app/components/global-search/utils.ts
@@ -42,9 +42,9 @@ export interface ComponentResult {
 }
 
 export interface Results {
-  [qualifier: string]: ComponentResult[];
+  [qualifier: string]: ComponentResult[] | undefined;
 }
 
 export interface More {
-  [qualifier: string]: number;
+  [qualifier: string]: number | undefined;
 }
diff --git a/server/sonar-web/src/main/js/app/components/nav/global/MainSonarQubeBar.tsx b/server/sonar-web/src/main/js/app/components/nav/global/MainSonarQubeBar.tsx
index 597c031da3c..e7f0afadc52 100644
--- a/server/sonar-web/src/main/js/app/components/nav/global/MainSonarQubeBar.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/global/MainSonarQubeBar.tsx
@@ -37,6 +37,6 @@ function LogoWithAriaText() {
   );
 }
 
-export default function MainSonarQubeBar({ children }: React.PropsWithChildren<{}>) {
+export default function MainSonarQubeBar({ children }: React.PropsWithChildren<object>) {
   return <MainAppBar Logo={LogoWithAriaText}>{children}</MainAppBar>;
 }
diff --git a/server/sonar-web/src/main/js/components/embed-docs-modal/__tests__/EmbedDocsPopup-test.tsx b/server/sonar-web/src/main/js/components/embed-docs-modal/__tests__/EmbedDocsPopup-test.tsx
index 6f383868948..234a5b9d70b 100644
--- a/server/sonar-web/src/main/js/components/embed-docs-modal/__tests__/EmbedDocsPopup-test.tsx
+++ b/server/sonar-web/src/main/js/components/embed-docs-modal/__tests__/EmbedDocsPopup-test.tsx
@@ -72,7 +72,12 @@ function renderEmbedDocsPopup() {
         <button onClick={addSuggestion} type="button">
           add.suggestion
         </button>
-        <button onClick={() => setSuggestions([])} type="button">
+        <button
+          onClick={() => {
+            setSuggestions([]);
+          }}
+          type="button"
+        >
           remove.suggestion
         </button>
         <EmbedDocsPopupHelper />