diff --git a/admin/src/components/ConfigList/index.jsx b/admin/src/components/ConfigList/index.jsx
index 4045a26..c4df491 100644
--- a/admin/src/components/ConfigList/index.jsx
+++ b/admin/src/components/ConfigList/index.jsx
@@ -1,7 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
import { useIntl } from 'react-intl';
import { isEmpty } from 'lodash';
import { useDispatch } from 'react-redux';
+import styled from 'styled-components';
import {
Table,
@@ -12,7 +13,12 @@ import {
Typography,
Checkbox,
Loader,
+ Flex,
+ Box,
+ TextInput,
+ IconButton,
} from '@strapi/design-system';
+import { CaretDown, CaretUp, Search, Cross } from '@strapi/icons';
import ConfigDiff from '../ConfigDiff';
import FirstExport from '../FirstExport';
@@ -20,14 +26,33 @@ import NoChanges from '../NoChanges';
import ConfigListRow from './ConfigListRow';
import { setConfigPartialDiffInState } from '../../state/actions/Config';
+const SearchBox = styled(Box)`
+ width: 100%;
+
+ @media (min-width: 768px) {
+ width: 40%;
+ }
+`;
const ConfigList = ({ diff, isLoading }) => {
const [cName, setCname] = useState('');
const [rows, setRows] = useState([]);
const [checkedItems, setCheckedItems] = useState([]);
+ const [sortBy, setSortBy] = useState('configName');
+ const [sortOrder, setSortOrder] = useState('asc');
+ const [searchQuery, setSearchQuery] = useState('');
const dispatch = useDispatch();
const { formatMessage } = useIntl();
+ const handleSort = (field) => {
+ if (sortBy === field) {
+ setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
+ } else {
+ setSortBy(field);
+ setSortOrder('asc');
+ }
+ };
+
const getConfigState = (configName) => {
if (
diff.fileConfig[configName]
@@ -83,6 +108,25 @@ const ConfigList = ({ diff, isLoading }) => {
dispatch(setConfigPartialDiffInState(newPartialDiff));
}, [checkedItems]);
+ const sortedRows = useMemo(() => {
+ const rowsWithIndex = rows.map((row, originalIndex) => ({ ...row, originalIndex }));
+
+ const filteredRows = searchQuery
+ ? rowsWithIndex.filter((row) => (
+ `${row.configType}.${row.configName}`.toLowerCase().includes(searchQuery.toLowerCase())
+ ))
+ : rowsWithIndex;
+
+ return filteredRows.sort((a, b) => {
+ const aValue = (a[sortBy] || '').toLowerCase();
+ const bValue = (b[sortBy] || '').toLowerCase();
+
+ if (aValue < bValue) return sortOrder === 'asc' ? -1 : 1;
+ if (aValue > bValue) return sortOrder === 'asc' ? 1 : -1;
+ return 0;
+ });
+ }, [rows, sortBy, sortOrder, searchQuery]);
+
const renderList = () => {
if (isLoading) {
return (
@@ -103,44 +147,76 @@ const ConfigList = ({ diff, isLoading }) => {
const allChecked = checkedItems && checkedItems.every(Boolean);
const isIndeterminate = checkedItems.some(Boolean) && !allChecked;
- return (
-
-
-
-
-
- setCheckedItems(checkedItems.map(() => value))}
+ const renderSortIcon = (field) => {
+ if (sortBy !== field) return null;
+ return sortOrder === 'asc' ? : ;
+ };
+
+ return (
+
+
+ }
+ endAction={searchQuery ? (
+ setSearchQuery('')}
+ variant="ghost"
+ >
+
+
+ ) : null}
+ aria-label={formatMessage({ id: 'config-sync.ConfigList.Search' })}
+ placeholder={formatMessage({ id: 'config-sync.ConfigList.Search' })}
+ value={searchQuery}
+ onChange={(e) => setSearchQuery(e.target.value)}
+ />
+
+
+
+
+ |
+ setCheckedItems(checkedItems.map(() => value))}
+ />
+ |
+ handleSort('configName')} style={{ cursor: 'pointer' }}>
+
+ {formatMessage({ id: 'config-sync.ConfigList.ConfigName' })}
+ {renderSortIcon('configName')}
+
+ |
+ handleSort('configType')} style={{ cursor: 'pointer' }}>
+
+ {formatMessage({ id: 'config-sync.ConfigList.ConfigType' })}
+ {renderSortIcon('configType')}
+
+ |
+ handleSort('state')} style={{ cursor: 'pointer' }}>
+
+ {formatMessage({ id: 'config-sync.ConfigList.State' })}
+ {renderSortIcon('state')}
+
+ |
+
+
+
+ {sortedRows.map((row) => (
+ {
+ checkedItems[row.originalIndex] = !checkedItems[row.originalIndex];
+ setCheckedItems([...checkedItems]);
+ }}
/>
-
-
- {formatMessage({ id: 'config-sync.ConfigList.ConfigName' })}
- |
-
- {formatMessage({ id: 'config-sync.ConfigList.ConfigType' })}
- |
-
- {formatMessage({ id: 'config-sync.ConfigList.State' })}
- |
-
-
-
- {rows.map((row, index) => (
- {
- checkedItems[index] = !checkedItems[index];
- setCheckedItems([...checkedItems]);
- }}
- />
- ))}
-
-
- |
+