diff --git a/src/features/admin/components/policies/PolicyHelpModal.tsx b/src/features/admin/components/policies/PolicyHelpModal.tsx new file mode 100644 index 000000000..4bb43305e --- /dev/null +++ b/src/features/admin/components/policies/PolicyHelpModal.tsx @@ -0,0 +1,59 @@ +import { FC } from 'react'; +import { defineMessages, useIntl } from 'react-intl'; + +import Modal from 'soapbox/components/ui/modal.tsx'; + +const messages = defineMessages({ + welcomeDescription: { id: 'admin.policies.help.description', defaultMessage: 'Policy Manager allows you to configure moderation and content policies for your instance.' }, + welcomeStep1: { id: 'admin.policies.help.step1', defaultMessage: '1. Use the search bar to find policies you want to add' }, + welcomeStep2: { id: 'admin.policies.help.step2', defaultMessage: '2. Configure each policy with your desired settings' }, + welcomeStep3: { id: 'admin.policies.help.step3', defaultMessage: '3. Click Save to apply the changes' }, + welcomeTip: { id: 'admin.policies.help.tip', defaultMessage: 'Tip: You can add multiple policies to create a comprehensive moderation strategy' }, +}); + +interface PolicyHelpModalProps { + title: string; + onClose: () => void; + confirmText: string; +} + +const PolicyHelpModal: FC = ({ title, onClose, confirmText }) => { + const intl = useIntl(); + + return ( +
+
+ +
+

+ {intl.formatMessage(messages.welcomeDescription)} +

+ +
+

+ {intl.formatMessage(messages.welcomeStep1)} +

+

+ {intl.formatMessage(messages.welcomeStep2)} +

+

+ {intl.formatMessage(messages.welcomeStep3)} +

+
+ +
+ {intl.formatMessage(messages.welcomeTip)} +
+
+
+
+
+ ); +}; + +export default PolicyHelpModal; \ No newline at end of file diff --git a/src/features/admin/policy-manager.tsx b/src/features/admin/policy-manager.tsx index 615ed7a8e..73ca375a5 100644 --- a/src/features/admin/policy-manager.tsx +++ b/src/features/admin/policy-manager.tsx @@ -7,10 +7,10 @@ import FuzzySearchInput from 'soapbox/components/fuzzy-search-input.tsx'; import { Button } from 'soapbox/components/ui/button.tsx'; import { Card } from 'soapbox/components/ui/card.tsx'; import { Column } from 'soapbox/components/ui/column.tsx'; -import Modal from 'soapbox/components/ui/modal.tsx'; import Spinner from 'soapbox/components/ui/spinner.tsx'; import Stack from 'soapbox/components/ui/stack.tsx'; import { Policy } from 'soapbox/features/admin/components/policies/Policy.tsx'; +import PolicyHelpModal from 'soapbox/features/admin/components/policies/PolicyHelpModal.tsx'; import { usePolicyReducer } from 'soapbox/features/admin/hooks/usePolicyReducer.ts'; import toast from 'soapbox/toast.tsx'; import { PolicyItem, PolicyParam, PolicyParams, PolicySpec, PolicySpecItem } from 'soapbox/utils/policies.ts'; @@ -18,65 +18,16 @@ import { PolicyItem, PolicyParam, PolicyParams, PolicySpec, PolicySpecItem } fro const messages = defineMessages({ heading: { id: 'admin.policies.heading', defaultMessage: 'Manage Policies' }, searchPlaceholder: { id: 'admin.policies.search_placeholder', defaultMessage: 'What do you want to do?' }, + searchLabel: { id: 'admin.policies.search_label', defaultMessage: 'I want to...' }, noPolicyConfigured: { id: 'admin.policies.no_policies_configured', defaultMessage: 'No policies configured! Use the search bar above to get started.' }, removeValue: { id: 'admin.policies.remove_value', defaultMessage: 'Remove value' }, welcomeTitle: { id: 'admin.policies.welcome.title', defaultMessage: 'Welcome to Policy Manager' }, welcomeGetStarted: { id: 'admin.policies.welcome.get_started', defaultMessage: 'Get Started' }, helpTitle: { id: 'admin.policies.help.title', defaultMessage: 'Help' }, - helpButton: { id: 'admin.policies.help.button', defaultMessage: 'Help' }, - welcomeDescription: { id: 'admin.policies.help.description', defaultMessage: 'Policy Manager allows you to configure moderation and content policies for your instance.' }, - welcomeStep1: { id: 'admin.policies.help.step1', defaultMessage: '1. Use the search bar to find policies you want to add' }, - welcomeStep2: { id: 'admin.policies.help.step2', defaultMessage: '2. Configure each policy with your desired settings' }, - welcomeStep3: { id: 'admin.policies.help.step3', defaultMessage: '3. Click Save to apply the changes' }, - welcomeTip: { id: 'admin.policies.help.tip', defaultMessage: 'Tip: You can add multiple policies to create a comprehensive moderation strategy' }, + helpButton: { id: 'admin.policies.help.button', defaultMessage: 'Help...' }, okay: { id: 'admin.policies.help.okay', defaultMessage: 'Okay' }, }); -interface PolicyHelpModalProps { - title: string; - onClose: () => void; - confirmText: string; -} - -const PolicyHelpModal: FC = ({ title, onClose, confirmText }) => { - const intl = useIntl(); - - return ( -
-
- -
-

- {intl.formatMessage(messages.welcomeDescription)} -

- -
-

- {intl.formatMessage(messages.welcomeStep1)} -

-

- {intl.formatMessage(messages.welcomeStep2)} -

-

- {intl.formatMessage(messages.welcomeStep3)} -

-
- -
- {intl.formatMessage(messages.welcomeTip)} -
-
-
-
-
- ); -}; - const PolicySuggestion: FC<{ item: PolicyItem }> = ({ item }) => { return ( @@ -163,7 +114,7 @@ const PolicyManager: FC = () => { if (isWelcomeDialog) { setIsWelcomeDialog(false); try { - localStorage.setItem('policy_manager_welcome_shown', 'true'); + localStorage.setItem('soapbox:policies:welcome_shown', 'true'); } catch (error) { // Ignore localStorage errors console.warn('Could not store welcome dialog state in localStorage', error); @@ -288,25 +239,27 @@ const PolicyManager: FC = () => { /> )}
-
-
- - data={allPolicies} - keys={['name', 'description']} - onSelection={handleSelection} - displayKey='name' - placeholder={intl.formatMessage(messages.searchPlaceholder)} - className='w-full' - renderSuggestion={PolicySuggestion} - /> +
+
+ {intl.formatMessage(messages.searchLabel)}
-
+ + data={allPolicies} + keys={['name', 'description']} + onSelection={handleSelection} + displayKey='name' + placeholder={intl.formatMessage(messages.searchPlaceholder)} + className='w-full' + renderSuggestion={PolicySuggestion} + />
{renderPolicies()}