Refactored Pintura integration hook configuration (#18813)

no issue

- Refactored the Pintura integration to be easier to implement and also
more accurately display whether it's enabled or not.

---

<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at 8480176</samp>

This pull request refactors the code related to the Pintura image editor
integration in the admin settings. It introduces a custom hook that
handles the logic of checking and updating the integration status and
settings, and simplifies the UI components that use the hook. It also
removes unnecessary variables and props from the components and the
hook. The affected files are `Integrations.tsx`, `UserDetailModal.tsx`,
`BrandSettings.tsx`, `usePinturaEditor.ts`, `Facebook.tsx`, and
`Twitter.tsx`.

apps/admin-x-settings/src/components/settings/advanced/Integrations.tsx

@@ -9,6 +9,7 @@ import React, {useState} from 'react';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
 import TabView from '../../../admin-x-ds/global/TabView';
 import useHandleError from '../../../utils/api/handleError';
+import usePinturaEditor from '../../../hooks/usePinturaEditor';
 import useRouting from '../../../hooks/useRouting';
 import {ReactComponent as AmpIcon} from '../../../assets/icons/amp.svg';
 import {ReactComponent as FirstPromoterIcon} from '../../../assets/icons/firstpromoter.svg';
@@ -85,8 +86,10 @@ const BuiltInIntegrations: React.FC = () => {
 
     const zapierDisabled = config.hostSettings?.limits?.customIntegrations?.disabled;
 
+    const pinturaEditor = usePinturaEditor();
+
     const {settings} = useGlobalData();
-    const [ampEnabled, unsplashEnabled, pinturaEnabled, firstPromoterEnabled, slackUrl, slackUsername] = getSettingValues<boolean>(settings, ['amp', 'unsplash', 'pintura', 'firstpromoter', 'slack_url', 'slack_username']);
+    const [ampEnabled, unsplashEnabled, firstPromoterEnabled, slackUrl, slackUsername] = getSettingValues<boolean>(settings, ['amp', 'unsplash', 'pintura', 'firstpromoter', 'slack_url', 'slack_username']);
 
     return (
         <List titleSeparator={false}>
@@ -140,7 +143,7 @@ const BuiltInIntegrations: React.FC = () => {
                 action={() => {
                     openModal('integrations/pintura');
                 }}
-                active={pinturaEnabled}
+                active={pinturaEditor.isEnabled}
                 detail='Advanced image editing' icon=
                     {<PinturaIcon className='h-8 w-8' />} title
                     ='Pintura' />

apps/admin-x-settings/src/components/settings/general/Facebook.tsx

@@ -25,17 +25,10 @@ const Facebook: React.FC<{ keywords: string[] }> = ({keywords}) => {
 
     const {mutateAsync: uploadImage} = useUploadImage();
     // const [unsplashEnabled] = getSettingValues<boolean>(localSettings, ['unsplash']);
-    const [pinturaJsUrl] = getSettingValues<string>(localSettings, ['pintura_js_url']);
-    const [pinturaCssUrl] = getSettingValues<string>(localSettings, ['pintura_css_url']);
     // const [showUnsplash, setShowUnsplash] = useState<boolean>(false);
     const handleError = useHandleError();
 
-    const editor = usePinturaEditor(
-        {config: {
-            jsUrl: pinturaJsUrl || '',
-            cssUrl: pinturaCssUrl || ''
-        }}
-    );
+    const editor = usePinturaEditor();
 
     const [
         facebookTitle, facebookDescription, facebookImage, siteTitle, siteDescription

apps/admin-x-settings/src/components/settings/general/Twitter.tsx

@@ -26,15 +26,7 @@ const Twitter: React.FC<{ keywords: string[] }> = ({keywords}) => {
 
     const {mutateAsync: uploadImage} = useUploadImage();
 
-    const [pinturaJsUrl] = getSettingValues<string>(localSettings, ['pintura_js_url']);
-    const [pinturaCssUrl] = getSettingValues<string>(localSettings, ['pintura_css_url']);
-
-    const editor = usePinturaEditor(
-        {config: {
-            jsUrl: pinturaJsUrl || '',
-            cssUrl: pinturaCssUrl || ''
-        }}
-    );
+    const editor = usePinturaEditor();
 
     const [
         twitterTitle, twitterDescription, twitterImage, siteTitle, siteDescription

apps/admin-x-settings/src/components/settings/general/UserDetailModal.tsx

@@ -23,7 +23,6 @@ import {HostLimitError, useLimiter} from '../../../hooks/useLimiter';
 import {RoutingModalProps} from '../../providers/RoutingProvider';
 import {User, canAccessSettings, hasAdminAccess, isAdminUser, isAuthorOrContributor, isEditorUser, isOwnerUser, useDeleteUser, useEditUser, useMakeOwner} from '../../../api/users';
 import {getImageUrl, useUploadImage} from '../../../api/images';
-import {getSettingValues} from '../../../api/settings';
 import {showToast} from '../../../admin-x-ds/global/Toast';
 import {toast} from 'react-hot-toast';
 import {useGlobalData} from '../../providers/GlobalDataProvider';
@@ -149,16 +148,7 @@ const UserDetailModalContent: React.FC<{user: User}> = ({user}) => {
     const limiter = useLimiter();
 
     // Pintura integration
-    const {settings} = useGlobalData();
-    const [pinturaJsUrl] = getSettingValues<string>(settings, ['pintura_js_url']);
-    const [pinturaCssUrl] = getSettingValues<string>(settings, ['pintura_css_url']);
-
-    const editor = usePinturaEditor(
-        {config: {
-            jsUrl: pinturaJsUrl || '',
-            cssUrl: pinturaCssUrl || ''
-        }}
-    );
+    const editor = usePinturaEditor();
 
     const navigateOnClose = useCallback(() => {
         if (canAccessSettings(currentUser)) {

apps/admin-x-settings/src/components/settings/site/designAndBranding/BrandSettings.tsx

@@ -27,8 +27,6 @@ const BrandSettings: React.FC<{ values: BrandSettingValues, updateSetting: (key:
     const [siteDescription, setSiteDescription] = useState(values.description);
     const {settings} = useGlobalData();
     const [unsplashEnabled] = getSettingValues<boolean>(settings, ['unsplash']);
-    const [pinturaJsUrl] = getSettingValues<string>(settings, ['pintura_js_url']);
-    const [pinturaCssUrl] = getSettingValues<string>(settings, ['pintura_css_url']);
     const [showUnsplash, setShowUnsplash] = useState<boolean>(false);
     const {unsplashConfig} = useServices();
     const handleError = useHandleError();
@@ -39,12 +37,7 @@ const BrandSettings: React.FC<{ values: BrandSettingValues, updateSetting: (key:
         }, 500)
     );
 
-    const editor = usePinturaEditor(
-        {config: {
-            jsUrl: pinturaJsUrl || '',
-            cssUrl: pinturaCssUrl || ''
-        }}
-    );
+    const editor = usePinturaEditor();
 
     return (
         <div className='mt-7'>

apps/admin-x-settings/src/hooks/usePinturaEditor.ts

@@ -6,11 +6,6 @@ import {getSettingValues} from '../api/settings';
 import {useCallback, useEffect, useRef, useState} from 'react';
 import {useGlobalData} from '../components/providers/GlobalDataProvider';
 
-interface PinturaEditorConfig {
-    jsUrl?: string;
-    cssUrl?: string;
-}
-
 interface OpenEditorParams {
     image: string;
     handleSave: (dest: File) => void;
@@ -50,29 +45,27 @@ declare global {
     }
 }
 
-export default function usePinturaEditor({
-    config
-}: {
-        config: PinturaEditorConfig;
-    }) {
+export default function usePinturaEditor() {
     const {config: globalConfig, settings} = useGlobalData() as { config: Config, settings: Setting[] };
     const [pintura] = getSettingValues<boolean>(settings, ['pintura']);
     const [scriptLoaded, setScriptLoaded] = useState<boolean>(false);
     const [cssLoaded, setCssLoaded] = useState<boolean>(false);
     const [isOpen, setIsOpen] = useState<boolean>(false);
     const allowClose = useRef<boolean>(false);
+    const [pinturaJsUrl] = getSettingValues<string>(settings, ['pintura_js_url']);
+    const [pinturaCssUrl] = getSettingValues<string>(settings, ['pintura_css_url']);
 
     let isEnabled = pintura && scriptLoaded && cssLoaded || false;
     const pinturaConfig = globalConfig?.pintura as { js?: string; css?: string };
 
     useEffect(() => {
-        const pinturaJsUrl = () => {
+        const jsPath = () => {
             if (pinturaConfig?.js) {
                 return pinturaConfig?.js;
             }
-            return config?.jsUrl || null;
+            return pinturaJsUrl || null;
         };
-        let jsUrl = pinturaJsUrl();
+        let jsUrl = jsPath();
 
         // load the script from admin root if relative
         if (!jsUrl) {
@@ -105,16 +98,16 @@ export default function usePinturaEditor({
             Sentry.captureException(e);
             // Log script loading error
         }
-    }, [config?.jsUrl, pinturaConfig?.js]);
+    }, [pinturaJsUrl, pinturaConfig?.js]);
 
     useEffect(() => {
-        const pinturaCssUrl = () => {
+        const cssPath = () => {
             if (pinturaConfig?.css) {
                 return pinturaConfig?.css;
             }
-            return config?.cssUrl;
+            return pinturaCssUrl || null;
         };
-        let cssUrl = pinturaCssUrl();
+        let cssUrl = cssPath();
         if (!cssUrl) {
             return;
         }
@@ -143,7 +136,7 @@ export default function usePinturaEditor({
             Sentry.captureException(e);
             // wire up to sentry
         }
-    }, [config?.cssUrl, pinturaConfig?.css]);
+    }, [pinturaCssUrl, pinturaConfig?.css]);
 
     const openEditor = useCallback(
         ({image, handleSave}: OpenEditorParams) => {