chore: Include test case title query in filters to improve UI consistency (#284)

2025-09-23 11:22:14 +09:00
parent 81805c605a
commit 0a8cccfad4
12 changed files with 164 additions and 215 deletions
--- a/backend/routes/cases/index.js
+++ b/backend/routes/cases/index.js
@@ -11,7 +11,7 @@ export default function (sequelize) {
  const Case = defineCase(sequelize, DataTypes);

  router.get('/', verifySignedIn, verifyProjectVisibleFromFolderId, async (req, res) => {
-    const { folderId, priority, type, q } = req.query;
+    const { folderId, title, priority, type } = req.query;

    if (!folderId) {
      return res.status(400).json({ error: 'folderId is required' });
@@ -22,15 +22,15 @@ export default function (sequelize) {
        folderId: folderId,
      };

-      if (q) {
-        const searchTerm = q.trim();
+      if (title) {
+        const searchTerm = title.trim();

        if (searchTerm.length > 100) {
-          return res.status(400).json({ error: 'Search term too long' });
+          return res.status(400).json({ error: 'too long title param' });
        }

-        if (searchTerm.length >= 2) {
-          whereClause[Op.or] = [{ title: { [Op.like]: `%${q}%` } }];
+        if (searchTerm.length >= 1) {
+          whereClause[Op.or] = [{ title: { [Op.like]: `%${searchTerm}%` } }];
        }
      }

--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -204,13 +204,13 @@
    "case_description": "Test Case Description",
    "create": "Create",
    "please_enter": "Please enter test case title",
+    "filter": "Filter",
    "clear_all": "Clear all",
    "apply": "Apply",
    "select_priorities": "Select priorities",
    "selected": "Selected",
    "type": "Type",
-    "select_types": "Select types",
-    "search_placeholder": "Type to search..."
+    "select_types": "Select types"
  },
  "Case": {
    "back_to_cases": "Back to test cases",
--- a/frontend/messages/ja.json
+++ b/frontend/messages/ja.json
@@ -205,13 +205,13 @@
    "case_description": "テストケース詳細",
    "create": "作成",
    "please_enter": "テストケースタイトルを入力してください",
+    "filter": "フィルター",
    "clear_all": "すべてクリア",
    "apply": "適用",
    "select_priorities": "優先度を選択",
    "selected": "選択済み",
    "type": "タイプ",
-    "select_types": "タイプを選択",
-    "search_placeholder": "入力して検索..."
+    "select_types": "タイプを選択"
  },
  "Case": {
    "back_to_cases": "テストケース一覧に戻る",
--- a/frontend/messages/pt-BR.json
+++ b/frontend/messages/pt-BR.json
@@ -204,13 +204,13 @@
    "case_description": "Descrição do Caso de Teste",
    "create": "Criar",
    "please_enter": "Por favor, insira o título do caso de teste",
+    "filter": "Filtrar",
    "clear_all": "Limpar tudo",
    "apply": "Aplicar",
    "select_priorities": "Selecionar prioridades",
    "selected": "Selecionado",
    "type": "Tipo",
-    "select_types": "Selecionar tipos",
-    "search_placeholder": "Digite para buscar..."
+    "select_types": "Selecionar tipos"
  },
  "Case": {
    "back_to_cases": "Voltar para os casos de teste",
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/CasesPane.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/CasesPane.tsx
@@ -32,20 +32,25 @@ export default function CasesPane({
 }: Props) {
  const [cases, setCases] = useState<CaseType[]>([]);
  const [isCaseDialogOpen, setIsCaseDialogOpen] = useState(false);
+  const [titleFilter, setTitleFilter] = useState('');
  const [priorityFilter, setPriorityFilter] = useState<number[]>([]);
  const [typeFilter, setTypeFilter] = useState<number[]>([]);
-  const [queryTerm, setQueryTerm] = useState('');
  const [isDeleteConfirmDialogOpen, setIsDeleteConfirmDialogOpen] = useState(false);
  const [deleteCaseIds, setDeleteCaseIds] = useState<number[]>([]);
-  const [isSearching, setIsSearching] = useState(false);

  const context = useContext(TokenContext);
  const router = useRouter();
  const searchParams = useSearchParams();

-  const updateUrlParams = (updates: { priority?: number[]; type?: number[]; q?: string }) => {
+  const updateUrlParams = (updates: { title?: string; priority?: number[]; type?: number[] }) => {
    const currentParams = new URLSearchParams(searchParams.toString());

+    if (updates.title) {
+      currentParams.set('title', updates.title);
+    } else {
+      currentParams.delete('title');
+    }
+
    if (updates.priority && updates.priority.length > 0) {
      currentParams.set('priority', updates.priority.join(','));
    } else {
@@ -58,12 +63,6 @@ export default function CasesPane({
      currentParams.delete('type');
    }

-    if (updates.q) {
-      currentParams.set('q', updates.q);
-    } else {
-      currentParams.delete('q');
-    }
-
    const newUrl = `${window.location.pathname}?${currentParams.toString()}`;
    router.push(newUrl, { scroll: false });
  };
@@ -72,27 +71,25 @@ export default function CasesPane({
    async function fetchDataEffect() {
      if (!context.isSignedIn()) return;

+      const titleParam = searchParams.get('title') || '';
      const priorityParam = parseQueryParam(searchParams.get('priority'));
      const typeParam = parseQueryParam(searchParams.get('type'));
-      const queryParam = searchParams.get('q') || '';

+      setTitleFilter(titleParam);
      setPriorityFilter(priorityParam);
      setTypeFilter(typeParam);
-      setQueryTerm(queryParam);

      try {
        const data = await fetchCases(
          context.token.access_token,
          Number(folderId),
+          titleParam || undefined,
          priorityParam.length > 0 ? priorityParam : undefined,
-          typeParam.length > 0 ? typeParam : undefined,
-          queryParam || undefined
+          typeParam.length > 0 ? typeParam : undefined
        );
        setCases(data);
      } catch (error: unknown) {
        logError('Error fetching cases:', error);
-      } finally {
-        setIsSearching(false);
      }
    }

@@ -134,18 +131,11 @@ export default function CasesPane({
    await exportCases(context.token.access_token, Number(folderId), type);
  };

-  const handleFilterChange = (priorities: number[], types: number[]) => {
+  const handleFilterChange = (title: string, priorities: number[], types: number[]) => {
+    setTitleFilter(title);
    setPriorityFilter(priorities);
    setTypeFilter(types);
-    updateUrlParams({ priority: priorities, type: types, q: queryTerm });
-  };
-
-  const handleQueryChange = (q: string) => {
-    setQueryTerm(q);
-    if (q.trim()) {
-      setIsSearching(true);
-    }
-    updateUrlParams({ priority: priorityFilter, type: typeFilter, q });
+    updateUrlParams({ title: title, priority: priorities, type: types });
  };

  return (
@@ -159,15 +149,13 @@ export default function CasesPane({
        onDeleteCases={onDeleteCases}
        onExportCases={onExportCases}
        onFilterChange={handleFilterChange}
-        onQueryChange={handleQueryChange}
+        activeTitleFilter={titleFilter}
        activePriorityFilters={priorityFilter}
        activeTypeFilters={typeFilter}
        messages={messages}
        priorityMessages={priorityMessages}
        testTypeMessages={testTypeMessages}
        locale={locale}
-        queryTerm={queryTerm}
-        isSearching={isSearching}
      />

      <CaseDialog isOpen={isCaseDialogOpen} onCancel={closeDialog} onSubmit={onSubmit} messages={messages} />
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/TestCaseFilter.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/TestCaseFilter.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
-import { Button, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Selection } from '@heroui/react';
-import { ChevronDown, Circle } from 'lucide-react';
+import { Button, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Selection, Input } from '@heroui/react';
+import { SearchIcon, ChevronDown, Circle } from 'lucide-react';
 import { PriorityMessages } from '@/types/priority';
 import { TestTypeMessages } from '@/types/testType';
 import { CasesMessages } from '@/types/case';
@@ -10,24 +10,29 @@ type TestCaseFilterProps = {
  messages: CasesMessages;
  priorityMessages: PriorityMessages;
  testTypeMessages: TestTypeMessages;
+  activeTitleFilter: string;
  activePriorityFilters: number[];
  activeTypeFilters: number[];
-  onFilterChange: (priorities: number[], types: number[]) => void;
-  handleFilterChange: () => void;
+  onFilterChange: (title: string, priorities: number[], types: number[]) => void;
 };

 export default function TestCaseFilter({
  messages,
  priorityMessages,
  testTypeMessages,
+  activeTitleFilter,
  activePriorityFilters,
  activeTypeFilters,
  onFilterChange,
-  handleFilterChange,
 }: TestCaseFilterProps) {
+  const [title, setTitle] = useState<string>('');
  const [selectedPriorities, setSelectedPriorities] = useState<Selection>(new Set([]));
  const [selectedTypes, setSelectedTypes] = useState<Selection>(new Set([]));

+  useEffect(() => {
+    setTitle(activeTitleFilter);
+  }, [activeTitleFilter]);
+
  useEffect(() => {
    if (activePriorityFilters.length > 0) {
      const activeKeys = activePriorityFilters.map((index) => priorities[index]?.uid).filter(Boolean);
@@ -69,82 +74,97 @@ export default function TestCaseFilter({
        .filter((index) => index !== -1);
    }

-    onFilterChange(priorityIndices, typeIndices);
-    handleFilterChange();
+    onFilterChange(title, priorityIndices, typeIndices);
  };

  const handleClearFilter = () => {
    setSelectedPriorities(new Set([]));
    setSelectedTypes(new Set([]));
-    onFilterChange([], []);
-    handleFilterChange();
+    onFilterChange('', [], []);
  };

-  const isFilterEmpty =
-    (selectedPriorities === 'all' || (selectedPriorities instanceof Set && selectedPriorities.size === 0)) &&
-    (selectedTypes === 'all' || (selectedTypes instanceof Set && selectedTypes.size === 0));
-
  return (
-    <div className="flex items-end border-t border-default-200 p-3">
-      <div className="flex-col space-y-2 mr-2">
-        <h3 className="text-default-500 text-small">{messages.priority}</h3>
-        <Dropdown>
-          <DropdownTrigger>
-            <Button size="sm" variant="bordered" endContent={<ChevronDown size={16} />}>
-              {selectedPriorities === 'all' || selectedPriorities.size === 0
-                ? messages.selectPriorities
-                : `${selectedPriorities.size} ${messages.selected || 'selected'}`}
-            </Button>
-          </DropdownTrigger>
-          <DropdownMenu
-            aria-label="Priority filter"
-            selectionMode="multiple"
-            selectedKeys={selectedPriorities}
-            onSelectionChange={handlePrioritySelectionChange}
-          >
-            {priorities.map((priority) => (
-              <DropdownItem key={priority.uid} textValue={priorityMessages[priority.uid]} className="flex items-center">
-                <div className="flex items-center gap-2">
-                  <Circle size={8} color={priority.color} fill={priority.color} />
-                  <span className="text-sm">{priorityMessages[priority.uid]}</span>
-                </div>
-              </DropdownItem>
-            ))}
-          </DropdownMenu>
-        </Dropdown>
+    <div className="p-3">
+      <div className="mb-3 space-y-1">
+        <h3 className="text-default-500 text-small">{messages.caseTitle}</h3>
+        <Input
+          variant="bordered"
+          classNames={{
+            base: 'max-w-full h-8',
+            mainWrapper: 'h-full',
+            input: 'text-small',
+          }}
+          size="sm"
+          startContent={<SearchIcon size={18} />}
+          type="search"
+          value={title}
+          onValueChange={setTitle}
+          maxLength={100}
+        />
      </div>
-
-      <div className="flex-col space-y-2 mr-2">
-        <h3 className="text-default-500 text-small">{messages.type}</h3>
-        <Dropdown>
-          <DropdownTrigger>
-            <Button size="sm" variant="bordered" endContent={<ChevronDown size={16} />}>
-              {selectedTypes === 'all' || selectedTypes.size === 0
-                ? messages.selectTypes || 'Select Types'
-                : `${selectedTypes.size} ${messages.selected || 'selected'}`}
-            </Button>
-          </DropdownTrigger>
-          <DropdownMenu
-            className="max-h-[50vh] overflow-y-auto"
-            aria-label="Type filter"
-            selectionMode="multiple"
-            selectedKeys={selectedTypes}
-            onSelectionChange={handleTypeSelectionChange}
-          >
-            {testTypes.map((type) => (
-              <DropdownItem key={type.uid} textValue={testTypeMessages[type.uid]} className="flex items-center">
-                <span className="text-sm">{testTypeMessages[type.uid]}</span>
-              </DropdownItem>
-            ))}
-          </DropdownMenu>
-        </Dropdown>
+      <div className="mb-3 flex justify-between gap-2">
+        <div className="flex-col space-y-1">
+          <h3 className="text-default-500 text-small">{messages.priority}</h3>
+          <Dropdown>
+            <DropdownTrigger>
+              <Button size="sm" variant="bordered" className="w-32" endContent={<ChevronDown size={16} />}>
+                {selectedPriorities === 'all' || selectedPriorities.size === 0
+                  ? messages.selectPriorities
+                  : `${selectedPriorities.size} ${messages.selected || 'selected'}`}
+              </Button>
+            </DropdownTrigger>
+            <DropdownMenu
+              aria-label="Priority filter"
+              selectionMode="multiple"
+              selectedKeys={selectedPriorities}
+              onSelectionChange={handlePrioritySelectionChange}
+            >
+              {priorities.map((priority) => (
+                <DropdownItem
+                  key={priority.uid}
+                  textValue={priorityMessages[priority.uid]}
+                  className="flex items-center"
+                >
+                  <div className="flex items-center gap-2">
+                    <Circle size={8} color={priority.color} fill={priority.color} />
+                    <span className="text-sm">{priorityMessages[priority.uid]}</span>
+                  </div>
+                </DropdownItem>
+              ))}
+            </DropdownMenu>
+          </Dropdown>
+        </div>
+        <div className="flex-col space-y-1">
+          <h3 className="text-default-500 text-small">{messages.type}</h3>
+          <Dropdown>
+            <DropdownTrigger>
+              <Button size="sm" variant="bordered" className="w-32" endContent={<ChevronDown size={16} />}>
+                {selectedTypes === 'all' || selectedTypes.size === 0
+                  ? messages.selectTypes || 'Select Types'
+                  : `${selectedTypes.size} ${messages.selected || 'selected'}`}
+              </Button>
+            </DropdownTrigger>
+            <DropdownMenu
+              className="max-h-[50vh] overflow-y-auto"
+              aria-label="Type filter"
+              selectionMode="multiple"
+              selectedKeys={selectedTypes}
+              onSelectionChange={handleTypeSelectionChange}
+            >
+              {testTypes.map((type) => (
+                <DropdownItem key={type.uid} textValue={testTypeMessages[type.uid]} className="flex items-center">
+                  <span className="text-sm">{testTypeMessages[type.uid]}</span>
+                </DropdownItem>
+              ))}
+            </DropdownMenu>
+          </Dropdown>
+        </div>
      </div>
-
-      <div className="ml-auto">
-        <Button className="me-2" size="sm" variant="light" onPress={handleClearFilter} isDisabled={isFilterEmpty}>
+      <div className="flex justify-end">
+        <Button className="me-2" size="sm" variant="light" onPress={handleClearFilter}>
          {messages.clearAll}
        </Button>
-        <Button size="sm" variant="solid" color="primary" onPress={handleApplyFilter} isDisabled={isFilterEmpty}>
+        <Button size="sm" variant="solid" color="primary" onPress={handleApplyFilter}>
          {messages.apply}
        </Button>
      </div>
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx
@@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback, ReactNode, useEffect } from 'react';
+import { useState, useMemo, useCallback, ReactNode } from 'react';
 import {
  Table,
  TableHeader,
@@ -13,22 +13,12 @@ import {
  DropdownItem,
  Selection,
  SortDescriptor,
-  cn,
  Badge,
-  Input,
-  Spinner,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
 } from '@heroui/react';
-import {
-  Plus,
-  MoreVertical,
-  Trash,
-  FileDown,
-  ChevronDown,
-  Filter,
-  FileJson,
-  FileSpreadsheet,
-  SearchIcon,
-} from 'lucide-react';
+import { Plus, MoreVertical, Trash, FileDown, ChevronDown, Filter, FileJson, FileSpreadsheet } from 'lucide-react';
 import TestCaseFilter from './TestCaseFilter';
 import { Link } from '@/src/i18n/routing';
 import { CaseType, CasesMessages } from '@/types/case';
@@ -36,7 +26,6 @@ import { PriorityMessages } from '@/types/priority';
 import { TestTypeMessages } from '@/types/testType';
 import TestCasePriority from '@/components/TestCasePriority';
 import { LocaleCodeType } from '@/types/locale';
-import useDebounce from '@/utils/useDebounce';
 import { highlightSearchTerm } from '@/utils/highlightSearchTerm';

 type Props = {
@@ -47,16 +36,14 @@ type Props = {
  onDeleteCase: (caseId: number) => void;
  onDeleteCases: (caseIds: number[]) => void;
  onExportCases: (type: string) => void;
-  onFilterChange: (priorities: number[], types: number[]) => void;
-  onQueryChange: (q: string) => void;
-  queryTerm: string;
+  onFilterChange: (query: string, priorities: number[], types: number[]) => void;
+  activeTitleFilter: string;
  activePriorityFilters: number[];
  activeTypeFilters: number[];
  messages: CasesMessages;
  priorityMessages: PriorityMessages;
  testTypeMessages: TestTypeMessages;
  locale: LocaleCodeType;
-  isSearching: boolean;
 };

 export default function TestCaseTable({
@@ -68,15 +55,13 @@ export default function TestCaseTable({
  onDeleteCases,
  onExportCases,
  onFilterChange,
-  onQueryChange,
+  activeTitleFilter,
  activePriorityFilters,
  activeTypeFilters,
  messages,
  priorityMessages,
  testTypeMessages,
  locale,
-  queryTerm,
-  isSearching,
 }: Props) {
  const headerColumns = [
    { name: messages.id, uid: 'id', sortable: true },
@@ -91,15 +76,6 @@ export default function TestCaseTable({
    direction: 'ascending',
  });
  const [showFilter, setShowFilter] = useState(false);
-  const [localQueryTerm, setLocalQueryTerm] = useState(queryTerm);
-
-  const debouncedQuery = useDebounce((value: unknown) => {
-    onQueryChange(value as string);
-  }, 500);
-
-  useEffect(() => {
-    setLocalQueryTerm(queryTerm);
-  }, [queryTerm]);

  const sortedItems = useMemo(() => {
    if (cases.length === 0) {
@@ -118,17 +94,6 @@ export default function TestCaseTable({
    onDeleteCase(deleteCaseId);
  };

-  const handleFilterChange = () => {
-    setShowFilter(!showFilter);
-  };
-
-  const handleQueryChange = (value: string) => {
-    setLocalQueryTerm(value);
-    if (value.length >= 2 || value.length === 0) {
-      debouncedQuery(value);
-    }
-  };
-
  const renderCell = useCallback(
    (testCase: CaseType, columnKey: string): ReactNode => {
      const cellValue = testCase[columnKey as keyof CaseType];
@@ -148,7 +113,7 @@ export default function TestCaseTable({
            >
              {highlightSearchTerm({
                text: cellValue as string,
-                searchTerm: localQueryTerm,
+                searchTerm: activeTitleFilter,
              })}
            </Button>
          );
@@ -179,7 +144,7 @@ export default function TestCaseTable({
      }
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [localQueryTerm]
+    [activeTitleFilter]
  );

  const handleDeleteCases = () => {
@@ -193,7 +158,7 @@ export default function TestCaseTable({
    setSelectedKeys(new Set([]));
  };

-  const hasActiveFilters = activePriorityFilters.length > 0 || activeTypeFilters.length > 0;
+  const activeFilterNum = (activeTitleFilter ? 1 : 0) + activePriorityFilters.length + activeTypeFilters.length;

  const classNames = useMemo(
    () => ({
@@ -233,42 +198,35 @@ export default function TestCaseTable({
                {messages.delete}
              </Button>
            )}
-            <Input
-              className="me-2"
-              variant="bordered"
-              classNames={{
-                base: 'max-w-full sm:max-w-[12rem] h-8',
-                mainWrapper: 'h-full',
-                input: 'text-small',
-              }}
-              placeholder={messages.searchPlaceholder}
-              size="sm"
-              startContent={<SearchIcon size={18} />}
-              endContent={isSearching && <Spinner size="sm" />}
-              type="search"
-              value={localQueryTerm}
-              onValueChange={handleQueryChange}
-              aria-label={messages.searchPlaceholder}
-              maxLength={100}
-            />
-            <Badge
-              color="warning"
-              content=""
-              isInvisible={!hasActiveFilters}
-              shape="circle"
-              size="sm"
-              placement="bottom-left"
-            >
-              <Button
-                size="sm"
-                variant="bordered"
-                isIconOnly
-                onPress={handleFilterChange}
-                className={cn('me-2', showFilter && 'bg-primary')}
+            <Popover placement="bottom" isOpen={showFilter} onOpenChange={(open) => setShowFilter(open)}>
+              <Badge
+                color="danger"
+                content={activeFilterNum}
+                isInvisible={activeFilterNum === 0}
+                shape="circle"
+                placement="top-left"
              >
-                <Filter size={16} className={cn('text-default-500', showFilter && 'text-white')} />
-              </Button>
-            </Badge>
+                <PopoverTrigger>
+                  <Button startContent={<Filter size={16} />} size="sm" variant="bordered" className="me-2">
+                    {messages.filter}
+                  </Button>
+                </PopoverTrigger>
+              </Badge>
+              <PopoverContent>
+                <TestCaseFilter
+                  messages={messages}
+                  priorityMessages={priorityMessages}
+                  testTypeMessages={testTypeMessages}
+                  activeTitleFilter={activeTitleFilter}
+                  activePriorityFilters={activePriorityFilters}
+                  activeTypeFilters={activeTypeFilters}
+                  onFilterChange={(newTitleFilter, newPriorityFilters, newTypeFilters) => {
+                    setShowFilter(false);
+                    onFilterChange(newTitleFilter, newPriorityFilters, newTypeFilters);
+                  }}
+                />
+              </PopoverContent>
+            </Popover>
            <Dropdown>
              <DropdownTrigger>
                <Button
@@ -305,17 +263,6 @@ export default function TestCaseTable({
            </Button>
          </div>
        </div>
-        {showFilter && (
-          <TestCaseFilter
-            messages={messages}
-            priorityMessages={priorityMessages}
-            testTypeMessages={testTypeMessages}
-            activePriorityFilters={activePriorityFilters}
-            activeTypeFilters={activeTypeFilters}
-            onFilterChange={onFilterChange}
-            handleFilterChange={handleFilterChange}
-          />
-        )}
      </div>

      <Table
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/page.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/page.tsx
@@ -34,12 +34,12 @@ export default function Page({ params }: { params: { projectId: string; folderId
    create: t('create'),
    pleaseEnter: t('please_enter'),
    apply: t('apply'),
+    filter: t('filter'),
    clearAll: t('clear_all'),
    selectPriorities: t('select_priorities'),
    selected: t('selected'),
    type: t('type'),
    selectTypes: t('select_types'),
-    searchPlaceholder: t('search_placeholder'),
  };

  const priorityTranslation = useTranslations('Priority');
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunEditor.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunEditor.tsx
@@ -14,7 +14,6 @@ import {
  DropdownMenu,
  DropdownItem,
  addToast,
-  ButtonGroup,
  Badge,
 } from '@heroui/react';
 import {
@@ -103,7 +102,6 @@ export default function RunEditor({
  const [isNameInvalid] = useState<boolean>(false);
  const [isUpdating, setIsUpdating] = useState<boolean>(false);
  const [isDirty, setIsDirty] = useState(false);
-  const [exportType, setExportType] = useState(new Set(['xml']));
  const router = useRouter();
  useFormGuard(isDirty, messages.areYouSureLeave);

@@ -201,10 +199,6 @@ export default function RunEditor({
    setIsDirty(false);
  };

-  const handleExportTypeChange = (keys: Selection) => {
-    setExportType(new Set(Array.from(keys as Set<string>)));
-  };
-
  return (
    <>
      <div className="border-b-1 dark:border-neutral-700 w-full p-3 flex items-center justify-between">
--- a/frontend/types/case.ts
+++ b/frontend/types/case.ts
@@ -77,13 +77,13 @@ type CasesMessages = {
  caseDescription: string;
  create: string;
  pleaseEnter: string;
+  filter: string;
  clearAll: string;
  apply: string;
  selectPriorities: string;
  selected: string;
  type: string;
  selectTypes: string;
-  searchPlaceholder: string;
 };

 type CaseMessages = {
--- a/frontend/utils/caseControl.ts
+++ b/frontend/utils/caseControl.ts
@@ -26,9 +26,13 @@ async function fetchCase(jwt: string, caseId: number) {
  }
 }

-async function fetchCases(jwt: string, folderId: number, priority?: number[], type?: number[], q?: string) {
+async function fetchCases(jwt: string, folderId: number, title?: string, priority?: number[], type?: number[]) {
  const queryParams = [`folderId=${folderId}`];

+  if (title) {
+    queryParams.push(`title=${title}`);
+  }
+
  if (priority && priority.length > 0) {
    queryParams.push(`priority=${priority.join(',')}`);
  }
@@ -37,10 +41,6 @@ async function fetchCases(jwt: string, folderId: number, priority?: number[], ty
    queryParams.push(`type=${type.join(',')}`);
  }

-  if (q) {
-    queryParams.push(`q=${q}`);
-  }
-
  const query = queryParams.length > 0 ? `?${queryParams.join('&')}` : '';

  const url = `${apiServer}/cases${query}`;
--- a/frontend/utils/highlightSearchTerm.tsx
+++ b/frontend/utils/highlightSearchTerm.tsx
@@ -12,7 +12,7 @@ export function highlightSearchTerm({
  text,
  searchTerm,
  className,
-  minSearchLength = 2,
+  minSearchLength = 1,
 }: HighlightSearchTermProps): ReactNode {
  if (!text || !searchTerm || searchTerm.length < minSearchLength) {
    return text || null;