From b98c85d81c0b33437d33018594f5a211cc9e205a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Zolt=C3=A1n=20Bedi?= <zoltan.bedi@gmail.com>
Date: Thu, 24 Sep 2020 14:41:57 +0200
Subject: [PATCH] Chore: eslint plugin react hooks fix in jeager (#27580)

* Use eslintignore instead of gitignore

* Fix jaeger errors
---
 .eslintignore                                 |  7 +++++++
 .eslintrc                                     |  2 +-
 package.json                                  |  2 +-
 packages/grafana-toolkit/.eslintrc            | 11 +++++++++-
 .../src/TracePageHeader/TracePageHeader.tsx   | 21 +++++++++++--------
 .../SpanDetail/AccordianKeyValues.tsx         |  4 +++-
 6 files changed, 34 insertions(+), 13 deletions(-)
 create mode 100644 .eslintignore

diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 00000000000..44a2c41f737
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,7 @@
+node_modules
+compiled
+build
+vendor
+devenv
+data
+dist
diff --git a/.eslintrc b/.eslintrc
index 57c5efa8e15..f5e6138229e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,7 +3,7 @@
   "root": true,
   "overrides": [
     {
-      "files": ["packages/**/*.{ts,tsx}", "public/app/**/*.{ts,tsx}"],
+      "files": ["packages/grafana-ui/**/*.{ts,tsx}", "public/app/**/*.{ts,tsx}"],
       "rules": {
         "react-hooks/rules-of-hooks": "off",
         "react-hooks/exhaustive-deps": "off"
diff --git a/package.json b/package.json
index 7c55d14db57..e2a6f364eea 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "e2e:debug": "./e2e/start-and-run-suite debug",
     "e2e:dev": "./e2e/start-and-run-suite dev",
     "jest": "jest --notify --watch",
-    "lint": "eslint . --ext .js,.tsx,.ts --cache --ignore-path .gitignore --ignore-pattern devenv",
+    "lint": "eslint . --ext .js,.tsx,.ts --cache",
     "jest-ci": "mkdir -p reports/junit && export JEST_JUNIT_OUTPUT_DIR=reports/junit && jest --ci --reporters=default --reporters=jest-junit -w ${TEST_MAX_WORKERS:-100%}",
     "lint:fix": "yarn lint --fix",
     "packages:build": "lerna run clean && lerna run build --ignore @grafana-plugins/input-datasource",
diff --git a/packages/grafana-toolkit/.eslintrc b/packages/grafana-toolkit/.eslintrc
index b12d2a226c9..a465b644a3b 100644
--- a/packages/grafana-toolkit/.eslintrc
+++ b/packages/grafana-toolkit/.eslintrc
@@ -1,5 +1,14 @@
 {
   "rules": {
     "no-restricted-imports": ["error", { "patterns": ["@grafana/runtime"] }]
-  }
+  },
+  "overrides": [
+    {
+      "files": ["./**/*.{ts,tsx}"],
+      "rules": {
+        "react-hooks/rules-of-hooks": "off",
+        "react-hooks/exhaustive-deps": "off"
+      }
+    }
+  ]
 }
diff --git a/packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.tsx b/packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.tsx
index 6e7deb34702..4158af2f43c 100644
--- a/packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.tsx
+++ b/packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.tsx
@@ -164,14 +164,13 @@ export const HEADER_ITEMS = [
   {
     key: 'timestamp',
     label: 'Trace Start',
-    renderer: (trace: Trace) => {
-      const styles = getStyles(useTheme());
+    renderer: (trace: Trace, styles?: ReturnType<typeof getStyles>) => {
       const dateStr = formatDatetime(trace.startTime);
       const match = dateStr.match(/^(.+)(:\d\d\.\d+)$/);
       return match ? (
-        <span className={styles.TracePageHeaderOverviewItemValue}>
+        <span className={styles?.TracePageHeaderOverviewItemValue}>
           {match[1]}
-          <span className={styles.TracePageHeaderOverviewItemValueDetail}>{match[2]}</span>
+          <span className={styles?.TracePageHeaderOverviewItemValueDetail}>{match[2]}</span>
         </span>
       ) : (
         dateStr
@@ -223,22 +222,26 @@ export default function TracePageHeader(props: TracePageHeaderEmbedProps) {
     hideSearchButtons,
   } = props;
 
+  const styles = getStyles(useTheme());
+  const links = useMemo(() => {
+    if (!trace) {
+      return [];
+    }
+    return getTraceLinks(trace);
+  }, [trace]);
+
   if (!trace) {
     return null;
   }
 
-  const links = useMemo(() => getTraceLinks(trace), [trace]);
-
   const summaryItems =
     !hideSummary &&
     !slimView &&
     HEADER_ITEMS.map(item => {
       const { renderer, ...rest } = item;
-      return { ...rest, value: renderer(trace) };
+      return { ...rest, value: renderer(trace, styles) };
     });
 
-  const styles = getStyles(useTheme());
-
   const title = (
     <h1 className={cx(styles.TracePageHeaderTitle, canCollapse && styles.TracePageHeaderTitleCollapsible)}>
       <TraceName traceName={getTraceName(trace.spans)} />{' '}
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx
index 802d4ff2ec3..8d15ddec78a 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx
@@ -96,10 +96,12 @@ type AccordianKeyValuesProps = {
 // export for tests
 export function KeyValuesSummary(props: { data?: TraceKeyValuePair[] }) {
   const { data } = props;
+  const styles = getStyles(useTheme());
+
   if (!Array.isArray(data) || !data.length) {
     return null;
   }
-  const styles = getStyles(useTheme());
+
   return (
     <ul className={styles.summary}>
       {data.map((item, i) => (