diff --git a/src/features/admin/policy-manager.tsx b/src/features/admin/policy-manager.tsx index a3876d54e..615ed7a8e 100644 --- a/src/features/admin/policy-manager.tsx +++ b/src/features/admin/policy-manager.tsx @@ -22,46 +22,57 @@ const messages = defineMessages({ 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' }, - welcomeDescription: { id: 'admin.policies.welcome.description', defaultMessage: 'Policy Manager allows you to configure moderation and content policies for your instance.' }, - welcomeStep1: { id: 'admin.policies.welcome.step1', defaultMessage: '1. Use the search bar to find policies you want to add' }, - welcomeStep2: { id: 'admin.policies.welcome.step2', defaultMessage: '2. Configure each policy with your desired settings' }, - welcomeStep3: { id: 'admin.policies.welcome.step3', defaultMessage: '3. Click Save to apply the changes' }, - welcomeTip: { id: 'admin.policies.welcome.tip', defaultMessage: 'Tip: You can add multiple policies to create a comprehensive moderation strategy' }, + 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' }, + okay: { id: 'admin.policies.help.okay', defaultMessage: 'Okay' }, }); -const WelcomeDialog: FC<{ onClose: () => void }> = ({ onClose }) => { +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.welcomeDescription)} +

-
-

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

-

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

-

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

-
+
+

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

+

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

+

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

+
-
- {intl.formatMessage(messages.welcomeTip)} +
+ {intl.formatMessage(messages.welcomeTip)} +
-
-
+ +
); }; @@ -77,7 +88,8 @@ const PolicySuggestion: FC<{ item: PolicyItem }> = ({ item }) => { const PolicyManager: FC = () => { const intl = useIntl(); - const [showWelcomeDialog, setShowWelcomeDialog] = useState(false); + const [showHelpModal, setShowHelpModal] = useState(false); + const [isWelcomeDialog, setIsWelcomeDialog] = useState(false); const { allPolicies = [], isLoading, isFetched, storedPolicies, updatePolicy, isUpdating } = useModerationPolicies(); // get the current set of policies out of the API response const initialPolicies = storedPolicies?.spec?.policies ?? []; @@ -129,30 +141,42 @@ const PolicyManager: FC = () => { if (isFetched && !isLoading) { try { // Check if the user has seen the welcome dialog before - const hasSeenWelcome = localStorage.getItem('policy_manager_welcome_shown'); + const hasSeenWelcome = localStorage.getItem('soapbox:policies:welcome_shown'); if (!hasSeenWelcome) { - setShowWelcomeDialog(true); + setShowHelpModal(true); + setIsWelcomeDialog(true); } } catch (error) { // localStorage is unavailable, default to showing welcome - setShowWelcomeDialog(true); + setShowHelpModal(true); + setIsWelcomeDialog(true); } } }, [isFetched, isLoading]); - // Function to handle welcome dialog close - const handleWelcomeClose = () => { - setShowWelcomeDialog(false); - // Store that the user has seen the welcome dialog - try { - localStorage.setItem('policy_manager_welcome_shown', 'true'); - } catch (error) { - // Ignore localStorage errors - console.warn('Could not store welcome dialog state in localStorage', error); + // Function to handle help dialog close + const handleHelpClose = () => { + setShowHelpModal(false); + + // If this was the welcome dialog, store that the user has seen it + if (isWelcomeDialog) { + setIsWelcomeDialog(false); + try { + localStorage.setItem('policy_manager_welcome_shown', 'true'); + } catch (error) { + // Ignore localStorage errors + console.warn('Could not store welcome dialog state in localStorage', error); + } } }; + // Function to show help dialog + const showHelp = () => { + setIsWelcomeDialog(false); // Not the welcome dialog + setShowHelpModal(true); + }; + // Initialize fields when storedPolicies loads const prevInitialFields = useRef>(); @@ -250,19 +274,39 @@ const PolicyManager: FC = () => { return ( - {showWelcomeDialog && ( - + {showHelpModal && ( + )}
- - data={allPolicies} - keys={['name', 'description']} - onSelection={handleSelection} - displayKey='name' - placeholder={intl.formatMessage(messages.searchPlaceholder)} - className='w-full' - renderSuggestion={PolicySuggestion} - /> +
+
+ + data={allPolicies} + keys={['name', 'description']} + onSelection={handleSelection} + displayKey='name' + placeholder={intl.formatMessage(messages.searchPlaceholder)} + className='w-full' + renderSuggestion={PolicySuggestion} + /> +
+
{renderPolicies()}