refactor: rename FilterTabs to FilterOptions

Author: pranjal-jately-ld

packages/toolbar/src/core/tests/FilterTabs.test.tsx renamed to packages/toolbar/src/core/tests/FilterOptions.test.tsx

@@ -1,11 +1,14 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { expect, test, describe, vi } from 'vitest';
 
-import { FilterTabs, type FilterTabsProps } from '../ui/Toolbar/components/FilterTabs/FilterTabs';
-import { FilterTabsContext, type FilterMode } from '../ui/Toolbar/components/FilterTabs/useFilterTabsContext';
+import { FilterOptions, type FilterOptionsProps } from '../ui/Toolbar/components/FilterOptions/FilterOptions';
+import {
+  FlagFilterOptionsContext,
+  type FlagFilterMode,
+} from '../ui/Toolbar/components/FilterOptions/useFlagFilterOptions';
 
-describe('FilterTabs', () => {
-  const defaultProps: FilterTabsProps = {
+describe('FilterOptions', () => {
+  const defaultProps: FilterOptionsProps = {
     totalFlags: 5,
     filteredFlags: 5,
     totalOverriddenFlags: 2,
@@ -15,15 +18,15 @@ describe('FilterTabs', () => {
     isLoading: false,
   };
 
-  const renderWithContext = (props: FilterTabsProps = defaultProps, activeFilter: FilterMode = 'all') => {
+  const renderWithContext = (props: FilterOptionsProps = defaultProps, activeFilter: FlagFilterMode = 'all') => {
     const onFilterChange = vi.fn();
 
     return {
       onFilterChange,
       ...render(
-        <FilterTabsContext.Provider value={{ activeFilter, onFilterChange }}>
-          <FilterTabs {...props} />
-        </FilterTabsContext.Provider>,
+        <FlagFilterOptionsContext.Provider value={{ activeFilter, onFilterChange }}>
+          <FilterOptions {...props} />
+        </FlagFilterOptionsContext.Provider>,
       ),
     };
   };

packages/toolbar/src/core/ui/Toolbar/TabContent/FlagDevServerTabContent.tsx

@@ -10,8 +10,8 @@ import { BooleanFlagControl, MultivariateFlagControl, StringNumberFlagControl }
 import { OverrideIndicator } from '../components/OverrideIndicator';
 import { StarButton } from '../components/StarButton';
 import { useStarredFlags } from '../context/StarredFlagsProvider';
-import { type FilterMode, FilterTabsContext } from '../components/FilterTabs/useFilterTabsContext';
-import { FilterTabs } from '../components/FilterTabs/FilterTabs';
+import { type FlagFilterMode, FlagFilterOptionsContext } from '../components/FilterOptions/useFlagFilterOptions';
+import { FilterOptions } from '../components/FilterOptions/FilterOptions';
 import { VIRTUALIZATION } from '../constants';
 
 import * as styles from './FlagDevServerTabContent.css';
@@ -28,7 +28,7 @@ export function FlagDevServerTabContent(props: FlagDevServerTabContentProps) {
   const { flags } = state;
   const { isStarred, toggleStarred, clearAllStarred, starredCount } = useStarredFlags();
 
-  const [activeFilter, setActiveFilter] = useState<FilterMode>('all');
+  const [activeFilter, setActiveFilter] = useState<FlagFilterMode>('all');
   const parentRef = useRef<HTMLDivElement>(null);
 
   const flagEntries = Object.entries(flags);
@@ -138,10 +138,10 @@ export function FlagDevServerTabContent(props: FlagDevServerTabContentProps) {
   const { title: genericHelpTitle, subtitle: genericHelpSubtitle } = getGenericHelpText();
 
   return (
-    <FilterTabsContext.Provider value={{ activeFilter, onFilterChange: setActiveFilter }}>
+    <FlagFilterOptionsContext.Provider value={{ activeFilter, onFilterChange: setActiveFilter }}>
       <div data-testid="flag-dev-server-tab-content">
         <>
-          <FilterTabs
+          <FilterOptions
             totalFlags={flagEntries.length}
             filteredFlags={filteredFlags.length}
             totalOverriddenFlags={totalOverriddenFlags}
@@ -215,6 +215,6 @@ export function FlagDevServerTabContent(props: FlagDevServerTabContentProps) {
           )}
         </>
       </div>
-    </FilterTabsContext.Provider>
+    </FlagFilterOptionsContext.Provider>
   );
 }

packages/toolbar/src/core/ui/Toolbar/TabContent/FlagSdkOverrideTabContent.tsx

@@ -10,8 +10,8 @@ import { LocalBooleanFlagControl, LocalStringNumberFlagControl } from '../compon
 import { OverrideIndicator } from '../components/OverrideIndicator';
 import { StarButton } from '../components/StarButton';
 import { useStarredFlags } from '../context/StarredFlagsProvider';
-import { type FilterMode, FilterTabsContext } from '../components/FilterTabs/useFilterTabsContext';
-import { FilterTabs } from '../components/FilterTabs/FilterTabs';
+import { type FlagFilterMode, FlagFilterOptionsContext } from '../components/FilterOptions/useFlagFilterOptions';
+import { FilterOptions } from '../components/FilterOptions/FilterOptions';
 import { VIRTUALIZATION } from '../constants';
 import { EASING } from '../constants/animations';
 import type { LocalFlag } from '../context';
@@ -31,7 +31,7 @@ function FlagSdkOverrideTabContentInner(props: FlagSdkOverrideTabContentInnerPro
   const analytics = useAnalytics();
   const { flags, isLoading } = useFlagSdkOverrideContext();
   const { isStarred, toggleStarred, clearAllStarred, starredCount } = useStarredFlags();
-  const [activeFilter, setActiveFilter] = useState<FilterMode>('all');
+  const [activeFilter, setActiveFilter] = useState<FlagFilterMode>('all');
   const parentRef = useRef<HTMLDivElement>(null);
 
   const handleClearOverride = useCallback(
@@ -176,10 +176,10 @@ function FlagSdkOverrideTabContentInner(props: FlagSdkOverrideTabContentInnerPro
   const { title: genericHelpTitle, subtitle: genericHelpSubtitle } = getGenericHelpText();
 
   return (
-    <FilterTabsContext.Provider value={{ activeFilter, onFilterChange: setActiveFilter }}>
+    <FlagFilterOptionsContext.Provider value={{ activeFilter, onFilterChange: setActiveFilter }}>
       <div data-testid="flag-sdk-tab-content">
         <>
-          <FilterTabs
+          <FilterOptions
             totalFlags={flagEntries.length}
             filteredFlags={filteredFlags.length}
             totalOverriddenFlags={totalOverriddenFlags}
@@ -273,7 +273,7 @@ function FlagSdkOverrideTabContentInner(props: FlagSdkOverrideTabContentInnerPro
           )}
         </>
       </div>
-    </FilterTabsContext.Provider>
+    </FlagFilterOptionsContext.Provider>
   );
 }
 

packages/toolbar/src/core/ui/Toolbar/components/FilterTabs/ClearButton.css.ts renamed to packages/toolbar/src/core/ui/Toolbar/components/FilterOptions/ClearButton.css.ts

@@ -21,7 +21,7 @@ export const bottomRow = style({
   gap: '12px',
 });
 
-export const tab = style({
+export const option = style({
   background: 'transparent',
   border: '1px solid var(--lp-color-gray-600)',
   color: 'var(--lp-color-gray-200)',
@@ -50,7 +50,7 @@ export const tab = style({
   },
 });
 
-export const activeTab = style({
+export const activeOption = style({
   background: '#283050',
   borderColor: '#6A78D1',
   color: 'white',

packages/toolbar/src/core/ui/Toolbar/components/FilterTabs/ClearButton.tsx renamed to packages/toolbar/src/core/ui/Toolbar/components/FilterOptions/ClearButton.tsx

@@ -1,14 +1,14 @@
-import { useFilterTabsContext, type FilterMode } from './useFilterTabsContext';
+import { useFlagFilterOptions, type FlagFilterMode } from './useFlagFilterOptions';
 import { ClearButton } from './ClearButton';
-import * as styles from './FilterTabs.css';
+import * as styles from './FilterOptions.css';
 
-const FILTER_TABS = [
+const FILTER_OPTIONS = [
   { id: 'all' as const, label: 'All' },
   { id: 'overrides' as const, label: 'Overrides' },
   { id: 'starred' as const, label: 'Starred' },
-] satisfies { id: FilterMode; label: string }[];
+] satisfies { id: FlagFilterMode; label: string }[];
 
-export interface FilterTabsProps {
+export interface FilterOptionsProps {
   totalFlags: number;
   filteredFlags: number;
   totalOverriddenFlags: number;
@@ -18,10 +18,10 @@ export interface FilterTabsProps {
   isLoading?: boolean;
 }
 
-export function FilterTabs(props: FilterTabsProps) {
+export function FilterOptions(props: FilterOptionsProps) {
   const { totalFlags, filteredFlags, totalOverriddenFlags, starredCount, onClearOverrides, onClearStarred, isLoading } =
     props;
-  const { activeFilter, onFilterChange } = useFilterTabsContext();
+  const { activeFilter, onFilterChange } = useFlagFilterOptions();
 
   const isAllActive = activeFilter === 'all';
   const isOverridesActive = activeFilter === 'overrides';
@@ -30,12 +30,12 @@ export function FilterTabs(props: FilterTabsProps) {
   return (
     <div className={styles.container}>
       <div className={styles.topRow}>
-        {FILTER_TABS.map((filter) => {
+        {FILTER_OPTIONS.map((filter) => {
           const isActive = activeFilter === filter.id;
           return (
             <button
               key={filter.id}
-              className={`${styles.tab} ${isActive ? styles.activeTab : ''}`}
+              className={`${styles.option} ${isActive ? styles.activeOption : ''}`}
               onClick={() => onFilterChange(filter.id)}
               data-active={isActive}
               aria-label={`Show ${filter.label.toLowerCase()} flags`}

packages/toolbar/src/core/ui/Toolbar/components/FilterTabs/FilterTabs.css.ts renamed to packages/toolbar/src/core/ui/Toolbar/components/FilterOptions/FilterOptions.css.ts

@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react';
+
+export type FlagFilterMode = 'all' | 'overrides' | 'starred';
+
+interface FlagFilterOptionsContextType {
+  activeFilter: FlagFilterMode;
+  onFilterChange: (filter: FlagFilterMode) => void;
+}
+
+export const FlagFilterOptionsContext = createContext<FlagFilterOptionsContextType | undefined>(undefined);
+
+export const useFlagFilterOptions = () => {
+  const context = useContext(FlagFilterOptionsContext);
+  if (!context) {
+    throw new Error('useFlagFilterOptions must be used within a FlagFilterOptionsContext.Provider');
+  }
+  return context;
+};

packages/toolbar/src/core/ui/Toolbar/components/FilterTabs/FilterTabs.tsx renamed to packages/toolbar/src/core/ui/Toolbar/components/FilterOptions/FilterOptions.tsx

@@ -7,5 +7,9 @@ export { LaunchDarklyIcon } from './icons/LaunchDarklyIcon';
 export { StatusDot } from './StatusDot';
 export { TabContentRenderer } from './TabContentRenderer';
 export { ErrorMessage } from './ErrorMessage';
-export { type FilterMode, FilterTabsContext, useFilterTabsContext } from './FilterTabs/useFilterTabsContext';
-export { FilterTabs } from './FilterTabs/FilterTabs';
+export {
+  type FlagFilterMode,
+  FlagFilterOptionsContext,
+  useFlagFilterOptions,
+} from './FilterOptions/useFlagFilterOptions';
+export { FilterOptions } from './FilterOptions/FilterOptions';