chore: resolve lint issues

Signed-off-by: hainenber <dotronghai96@gmail.com>

superset-frontend/.eslintrc.js

@@ -245,6 +245,16 @@ module.exports = {
     // Lodash
     'lodash/import-scope': [2, 'member'],
 
+    // React effect best practices
+    'react-you-might-not-need-an-effect/no-reset-all-state-on-prop-change':
+      'error',
+    'react-you-might-not-need-an-effect/no-chain-state-updates': 'error',
+    'react-you-might-not-need-an-effect/no-event-handler': 'error',
+    'react-you-might-not-need-an-effect/no-derived-state': 'error',
+
+    // Storybook
+    'storybook/prefer-pascal-case': 'error',
+
     // File progress
     'file-progress/activate': 1,
 

superset-frontend/oxlint.json

@@ -34,7 +34,8 @@
     "no-unused-vars": "off",
     "no-undef": "error",
     "no-prototype-builtins": "off",
-    "no-unsafe-optional-chaining": "off",
+    "no-unsafe-optional-chaining": "error",
+    "no-constant-binary-expression": "error",
     "no-import-assign": "off",
     "no-promise-executor-return": "off",
 
@@ -254,6 +255,7 @@
     // === Unicorn rules (bonus coverage) ===
     "unicorn/no-new-array": "error",
     "unicorn/no-invalid-remove-event-listener": "error",
+    "unicorn/no-useless-length-check": "error",
     "unicorn/filename-case": "off",
     "unicorn/prevent-abbreviations": "off",
     "unicorn/no-null": "off",

superset-frontend/packages/superset-ui-core/src/components/Layout/Layout.test.tsx

@@ -47,9 +47,10 @@ describe('Layout Component', () => {
   });
 
   test('hides Header when headerVisible is false', () => {
+    const headerVisible = false;
     render(
       <Layout>
-        {false && <Layout.Header>Header</Layout.Header>}
+        {headerVisible && <Layout.Header>Header</Layout.Header>}
         <Layout.Content>Content Area</Layout.Content>
         <Layout.Footer>Ant Design Layout Footer</Layout.Footer>
       </Layout>,
@@ -59,11 +60,14 @@ describe('Layout Component', () => {
   });
 
   test('hides Footer when footerVisible is false', () => {
+    const footerVisible = false;
     render(
       <Layout>
         <Layout.Header>Header</Layout.Header>
         <Layout.Content>Content Area</Layout.Content>
-        {false && <Layout.Footer>Ant Design Layout Footer</Layout.Footer>}
+        {footerVisible && (
+          <Layout.Footer>Ant Design Layout Footer</Layout.Footer>
+        )}
       </Layout>,
     );
 

superset-frontend/packages/superset-ui-core/src/components/Modal/Modal.tsx

@@ -280,7 +280,7 @@ const CustomModal = ({
   const shouldShowMask = !(resizable || draggable);
 
   const onDragStart = (_: DraggableEvent, uiData: DraggableData) => {
-    const { clientWidth, clientHeight } = window?.document?.documentElement;
+    const { clientWidth, clientHeight } = document.documentElement;
     const targetRect = draggableRef?.current?.getBoundingClientRect();
 
     if (targetRect) {

superset-frontend/plugins/plugin-chart-ag-grid-table/src/buildQuery.ts

@@ -606,7 +606,7 @@ const buildQuery: BuildQuery<TableChartFormData> = (
         {
           ...queryObject,
           time_offsets: [],
-          row_limit: Number(formData?.row_limit) ?? 0,
+          row_limit: Number(formData?.row_limit ?? 0),
           row_offset: 0,
           post_processing: [],
           is_rowcount: true,

superset-frontend/plugins/plugin-chart-echarts/test/BigNumber/transformProps.test.ts

@@ -196,7 +196,9 @@ describe('BigNumberWithTrendline', () => {
           showXAxis: true,
         },
       });
-      expect((transformed.echartOptions?.xAxis as any).show).toBe(true);
+      expect((transformed.echartOptions!.xAxis as { show: boolean }).show).toBe(
+        true,
+      );
     });
 
     test('should not show X axis when showXAxis is false', () => {
@@ -207,7 +209,9 @@ describe('BigNumberWithTrendline', () => {
           showXAxis: false,
         },
       });
-      expect((transformed.echartOptions?.xAxis as any).show).toBe(false);
+      expect((transformed.echartOptions!.xAxis as { show: boolean }).show).toBe(
+        false,
+      );
     });
 
     test('should show Y axis when showYAxis is true', () => {
@@ -218,7 +222,9 @@ describe('BigNumberWithTrendline', () => {
           showYAxis: true,
         },
       });
-      expect((transformed.echartOptions?.yAxis as any).show).toBe(true);
+      expect((transformed.echartOptions!.yAxis as { show: boolean }).show).toBe(
+        true,
+      );
     });
 
     test('should not show Y axis when showYAxis is false', () => {
@@ -229,7 +235,9 @@ describe('BigNumberWithTrendline', () => {
           showYAxis: false,
         },
       });
-      expect((transformed.echartOptions?.yAxis as any).show).toBe(false);
+      expect((transformed.echartOptions!.yAxis as { show: boolean }).show).toBe(
+        false,
+      );
     });
   });
 

superset-frontend/plugins/plugin-chart-echarts/test/MixedTimeseries/transformProps.test.ts

@@ -431,5 +431,5 @@ test('should add a formula annotation when X-axis column has dataset-level label
   expect(formulaSeries).toBeDefined();
   expect(formulaSeries?.data).toBeDefined();
   expect(Array.isArray(formulaSeries?.data)).toBe(true);
-  expect((formulaSeries?.data as unknown[]).length).toBeGreaterThan(0);
+  expect((formulaSeries?.data as unknown[])?.length).toBeGreaterThan(0);
 });

superset-frontend/plugins/plugin-chart-echarts/test/Timeseries/transformProps.test.ts

@@ -304,8 +304,8 @@ describe('EchartsTimeseries transformProps', () => {
     expect(formulaSeries).toBeDefined();
     expect(formulaSeries?.data).toBeDefined();
     expect(Array.isArray(formulaSeries?.data)).toBe(true);
-    expect((formulaSeries?.data as unknown[]).length).toBeGreaterThan(0);
-    const firstDataPoint = (formulaSeries?.data as [number, number][])[0];
+    expect((formulaSeries?.data as unknown[])?.length).toBeGreaterThan(0);
+    const firstDataPoint = (formulaSeries?.data as [number, number][])?.[0];
     expect(firstDataPoint).toBeDefined();
     expect(firstDataPoint[1]).toBe(firstDataPoint[0] * 2);
   });
@@ -384,7 +384,7 @@ describe('EchartsTimeseries transformProps', () => {
       result.echartOptions.series as SeriesOption[] | undefined
     )?.find((s: SeriesOption) => s.name === 'My Formula');
     expect(formulaSeries).toBeDefined();
-    const firstDataPoint = (formulaSeries?.data as [number, number][])[0];
+    const firstDataPoint = (formulaSeries?.data as [number, number][])?.[0];
     expect(firstDataPoint).toBeDefined();
     expect(firstDataPoint[0]).toBe(firstDataPoint[1] * 2);
   });

superset-frontend/plugins/plugin-chart-table/src/buildQuery.ts

@@ -347,7 +347,7 @@ const buildQuery: BuildQuery<TableChartFormData> = (
         {
           ...queryObject,
           time_offsets: [],
-          row_limit: Number(formData?.row_limit) ?? 0,
+          row_limit: Number(formData?.row_limit ?? 0),
           row_offset: 0,
           post_processing: [],
           is_rowcount: true,

superset-frontend/src/dashboard/components/nativeFilters/state.ts

@@ -210,10 +210,9 @@ export function useIsFilterInScope() {
       if (hasChartsInScope) {
         isChartInScope = filter.chartsInScope!.some((chartId: number) => {
           const tabParents = selectChartTabParents(chartId);
+          // Note: every() returns true for empty arrays, so length check is unnecessary
           return (
-            !tabParents ||
-            tabParents.length === 0 ||
-            tabParents.every(tab => activeTabs.includes(tab))
+            !tabParents || tabParents.every(tab => activeTabs.includes(tab))
           );
         });
       }
@@ -276,10 +275,9 @@ export function useIsCustomizationInScope() {
         customization.chartsInScope.length > 0 &&
         customization.chartsInScope.some((chartId: number) => {
           const tabParents = selectChartTabParents(chartId);
+          // Note: every() returns true for empty arrays, so length check is unnecessary
           return (
-            !tabParents ||
-            tabParents.length === 0 ||
-            tabParents.every(tab => activeTabs.includes(tab))
+            !tabParents || tabParents.every(tab => activeTabs.includes(tab))
           );
         });
 

superset-frontend/src/explore/components/ExploreChartPanel/index.tsx

@@ -113,8 +113,10 @@ const Styles = styled.div<{ showSplite: boolean }>`
   }
 
   .gutter {
-    border-top: 1px solid ${({ theme }) => theme.colorSplit};
-    border-bottom: 1px solid ${({ theme }) => theme.colorSplit};
+    border-top: 1px solid
+      color-mix(in srgb, ${({ theme }) => theme.colorSplit}, black 15%);
+    border-bottom: 1px solid
+      color-mix(in srgb, ${({ theme }) => theme.colorSplit}, black 15%);
     width: ${({ theme }) => theme.sizeUnit * 9}px;
     margin: ${({ theme }) => theme.sizeUnit * GUTTER_SIZE_FACTOR}px auto;
   }