diff --git a/package.json b/package.json index 99d9e7ce9..125ad95e6 100644 --- a/package.json +++ b/package.json @@ -104,6 +104,7 @@ "es-toolkit": "^1.27.0", "eslint-plugin-formatjs": "^5.2.2", "exifr": "^7.1.3", + "fuzzy-search": "^3.2.1", "graphemesplit": "^2.4.4", "html-react-parser": "^5.0.0", "http-link-header": "^1.0.2", @@ -163,6 +164,7 @@ "@testing-library/react": "^14.0.0", "@testing-library/react-hooks": "^8.0.1", "@testing-library/user-event": "^14.5.1", + "@types/fuzzy-search": "^2.1.5", "@typescript-eslint/eslint-plugin": "^7.0.0", "@typescript-eslint/parser": "^7.0.0", "@vitejs/plugin-react-swc": "^3.7.2", diff --git a/src/features/admin/policy-manager.tsx b/src/features/admin/policy-manager.tsx index 863a3899a..55c27c753 100644 --- a/src/features/admin/policy-manager.tsx +++ b/src/features/admin/policy-manager.tsx @@ -1,21 +1,61 @@ +import { FC, useState } from 'react'; import { defineMessages, useIntl } from 'react-intl'; import { useModerationPolicies } from 'soapbox/api/hooks/admin/index.ts'; +import { PolicyItem } from 'soapbox/api/hooks/admin/useModerationPolicies.ts'; +import FuzzySearchInput from 'soapbox/components/fuzzy-search-input.tsx'; import { Column } from 'soapbox/components/ui/column.tsx'; +import Spinner from 'soapbox/components/ui/spinner.tsx'; +import Stack from 'soapbox/components/ui/stack.tsx'; const messages = defineMessages({ heading: { id: 'column.admin.policies', defaultMessage: 'Manage Policies' }, - emptyMessage: { id: 'admin.moderation_log.empty_message', defaultMessage: 'You have not performed any moderation actions yet. When you do, a history will be shown here.' }, + searchPlaceholder: { id: 'admin.policies.search_placeholder', defaultMessage: 'What do you want to do?' }, }); -const PolicyManager = () => { +const PolicyManager: FC = () => { const intl = useIntl(); - const { allPolicies /* currentPolicy, isLoading, updatePolicy, isUpdating */ } = useModerationPolicies(); - console.warn(allPolicies); + const { allPolicies = [], isLoading } = useModerationPolicies(); + const [, setSearchValue] = useState(''); + + const handleSelection = (policy: PolicyItem | null) => { + if (policy) { + setSearchValue(policy.name); + } else { + setSearchValue(''); + } + }; + + const Suggestion: FC<{ item: PolicyItem }> = ({ item }) => { + return ( +
{item.name}
+
{item.description}
+
); + }; + return ( - + +
+ {isLoading ? ( +
+ ) : ( + + data={allPolicies} + keys={['name', 'description']} + onSelection={handleSelection} + displayKey='name' + placeholder={intl.formatMessage(messages.searchPlaceholder)} + className='w-full' + renderSuggestion={Suggestion} + /> + )} +
+ +
+ {/* Render filtered policies based on searchValue */} +
+
); }; - export default PolicyManager; diff --git a/yarn.lock b/yarn.lock index e5d5e231e..1418b6b8b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2624,6 +2624,11 @@ resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f" integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw== +"@types/fuzzy-search@^2.1.5": + version "2.1.5" + resolved "https://registry.yarnpkg.com/@types/fuzzy-search/-/fuzzy-search-2.1.5.tgz#f697a826c5214274ae36eaa96d47889846ed4374" + integrity sha512-Yw8OsjhVKbKw83LMDOZ9RXc+N+um48DmZYMrz7QChpHkQuygsc5O40oCL7SfvWgpaaviCx2TbNXYUBwhMtBH5w== + "@types/geojson@*": version "7946.0.10" resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.10.tgz#6dfbf5ea17142f7f9a043809f1cd4c448cb68249" @@ -4927,6 +4932,11 @@ functions-have-names@^1.2.3: resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834" integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ== +fuzzy-search@^3.2.1: + version "3.2.1" + resolved "https://registry.yarnpkg.com/fuzzy-search/-/fuzzy-search-3.2.1.tgz#65d5faad6bc633aee86f1898b7788dfe312ac6c9" + integrity sha512-vAcPiyomt1ioKAsAL2uxSABHJ4Ju/e4UeDM+g1OlR0vV4YhLGMNsdLNvZTpEDY4JCSt0E4hASCNM5t2ETtsbyg== + gensync@^1.0.0-beta.2: version "1.0.0-beta.2" resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"