chore: fix lint warnings after metadata filter implementation

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: hiepau1231

ui/src/components/flags/FlagTable.test.tsx

@@ -2,16 +2,23 @@
  * @jest-environment jsdom
  */
 import { configureStore } from '@reduxjs/toolkit';
-import { render, screen, fireEvent, act } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router';
+
 import FlagTable from './FlagTable';
 
 // ── Mock Radix Popover (portal-based, doesn't render in jsdom) ────────────
 jest.mock('~/components/Popover', () => ({
-  Popover: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-  PopoverTrigger: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-  PopoverContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>
+  Popover: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  PopoverTrigger: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  PopoverContent: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  )
 }));
 
 // ── Mock RTK Query hooks (actual import paths from FlagTable.tsx) ─────────
@@ -75,7 +82,10 @@ function renderTable() {
   return render(
     <MemoryRouter>
       <Provider store={store}>
-        <FlagTable environment={mockEnvironment as any} namespace={mockNamespace as any} />
+        <FlagTable
+          environment={mockEnvironment as any}
+          namespace={mockNamespace as any}
+        />
       </Provider>
     </MemoryRouter>
   );
@@ -95,7 +105,9 @@ describe('FlagTable — metadata filter', () => {
 
   it('renders Filter button in toolbar', () => {
     renderTable();
-    expect(screen.getByRole('button', { name: /^filter$/i })).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /^filter$/i })
+    ).toBeInTheDocument();
   });
 
   it('adds a chip after applying a metadata filter', () => {

ui/src/components/flags/FlagTable.tsx

@@ -37,6 +37,7 @@ import { DataTablePagination } from '~/components/TablePagination';
 import { TableSkeleton } from '~/components/TableSkeleton';
 import { DataTableViewOptions } from '~/components/TableViewOptions';
 import Well from '~/components/Well';
+import MetadataFilterPopover from '~/components/flags/MetadataFilterPopover';
 
 import { IBatchFlagEvaluationCount } from '~/types/Analytics';
 import { IEnvironment } from '~/types/Environment';
@@ -47,8 +48,6 @@ import { useError } from '~/data/hooks/error';
 import { applyMetadataFilters } from '~/utils/flagMetadataFilter';
 import { cls } from '~/utils/helpers';
 
-import MetadataFilterPopover from '~/components/flags/MetadataFilterPopover';
-
 function VariantFlagBadge({ enabled }: { enabled: boolean }) {
   return (
     <div
@@ -338,9 +337,7 @@ export default function FlagTable(props: FlagTableProps) {
               <Searchbox value={filter ?? ''} onChange={setFilter} />
               <MetadataFilterPopover
                 availableKeys={availableMetadataKeys}
-                onAdd={(f) =>
-                  setMetadataFilters((prev) => [...prev, f])
-                }
+                onAdd={(f) => setMetadataFilters((prev) => [...prev, f])}
               />
             </div>
             {hasFlags && <DataTableViewOptions table={table} />}
@@ -361,7 +358,9 @@ export default function FlagTable(props: FlagTableProps) {
                 <button
                   type="button"
                   onClick={() =>
-                    setMetadataFilters((prev) => prev.filter((_, idx) => idx !== i))
+                    setMetadataFilters((prev) =>
+                      prev.filter((_, idx) => idx !== i)
+                    )
                   }
                   aria-label={`Remove filter ${f.key}:${f.value}`}
                   className="ml-1 rounded-full hover:bg-muted p-0.5"
@@ -387,15 +386,15 @@ export default function FlagTable(props: FlagTableProps) {
           )}
         {table.getRowCount() === 0 &&
           (filter.length > 0 || metadataFilters.length > 0) && (
-          <Well>
-            <div className="flex flex-col items-center text-center p-4">
-              <FlagIcon className="h-12 w-12 text-muted-foreground/30 mb-4" />
-              <p className="text-sm text-muted-foreground">
-                No flags matched your search
-              </p>
-            </div>
-          </Well>
-        )}
+            <Well>
+              <div className="flex flex-col items-center text-center p-4">
+                <FlagIcon className="h-12 w-12 text-muted-foreground/30 mb-4" />
+                <p className="text-sm text-muted-foreground">
+                  No flags matched your search
+                </p>
+              </div>
+            </Well>
+          )}
 
         <div className="space-y-2">
           {table.getRowModel().rows.map((row) => {

ui/src/components/flags/MetadataFilterPopover.test.tsx

@@ -1,21 +1,31 @@
 /**
  * @jest-environment jsdom
  */
-import { render, screen, fireEvent } from '@testing-library/react';
-import MetadataFilterPopover from './MetadataFilterPopover';
+import { fireEvent, render, screen } from '@testing-library/react';
+
 import { MetadataFilter } from '~/types/Flag';
 
+import MetadataFilterPopover from './MetadataFilterPopover';
+
 // Radix Popover uses portals. We mock it so the content always renders inline.
 jest.mock('~/components/Popover', () => ({
-  Popover: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-  PopoverTrigger: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-  PopoverContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>
+  Popover: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  PopoverTrigger: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  PopoverContent: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  )
 }));
 
 describe('MetadataFilterPopover', () => {
   it('renders a "Filter" trigger button', () => {
     render(<MetadataFilterPopover availableKeys={[]} onAdd={jest.fn()} />);
-    expect(screen.getByRole('button', { name: /^filter$/i })).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /^filter$/i })
+    ).toBeInTheDocument();
   });
 
   it('calls onAdd with the entered key and value when Add is clicked', () => {

ui/src/components/flags/MetadataFilterPopover.tsx

@@ -3,11 +3,7 @@ import { useState } from 'react';
 
 import { BaseInput } from '~/components/BaseInput';
 import { Button } from '~/components/Button';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger
-} from '~/components/Popover';
+import { Popover, PopoverContent, PopoverTrigger } from '~/components/Popover';
 
 import { MetadataFilter } from '~/types/Flag';
 

ui/src/setupTests.ts

@@ -1,5 +1,6 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 import '@testing-library/jest-dom';
-
 // Polyfill TextEncoder/TextDecoder for jest-environment-jsdom + react-router
-import { TextEncoder, TextDecoder } from 'util';
+import { TextDecoder, TextEncoder } from 'util';
+
 Object.assign(global, { TextEncoder, TextDecoder });

ui/src/utils/flagMetadataFilter.test.ts

@@ -1,6 +1,7 @@
-import { applyMetadataFilters } from './flagMetadataFilter';
 import { FlagType, IFlag, MetadataFilter } from '~/types/Flag';
 
+import { applyMetadataFilters } from './flagMetadataFilter';
+
 const makeFlag = (key: string, metadata?: Record<string, any>): IFlag => ({
   key,
   name: key,