From da28aa5fc9c98fb7e387a2cef3a0a0f3f28b5923 Mon Sep 17 00:00:00 2001 From: Ronald Langeveld Date: Mon, 25 Sep 2023 17:14:09 +0700 Subject: [PATCH] Fixed Pintura config on Admin X (#18326) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit no issue - We didn't take Pintura settings into account have the url's passed in via configs as opposed to the database entry. - this checks for both now. - We also now require less configuration to wire in the editor. --- ### 🤖 Generated by Copilot at a85c114 This pull request removes the dependency on the `pintura` setting value for enabling the Pintura image editor in various components in the admin settings app. It uses a custom hook, `usePinturaEditor`, to get the editor configuration and availability from the global config and the settings API. It also adds error reporting and refactors the hook code for simplicity and consistency. --- apps/admin-x-settings/src/api/config.ts | 4 ++ .../components/settings/general/Facebook.tsx | 8 +--- .../components/settings/general/Twitter.tsx | 9 ++-- .../settings/general/UserDetailModal.tsx | 9 ++-- .../site/designAndBranding/BrandSettings.tsx | 10 +---- .../src/hooks/usePinturaEditor.ts | 43 +++++++++++++------ 6 files changed, 45 insertions(+), 38 deletions(-) diff --git a/apps/admin-x-settings/src/api/config.ts b/apps/admin-x-settings/src/api/config.ts index 4ab52ccdb6..38fa3111ed 100644 --- a/apps/admin-x-settings/src/api/config.ts +++ b/apps/admin-x-settings/src/api/config.ts @@ -40,6 +40,10 @@ export type Config = { billing?: { enabled?: boolean url?: string + }, + pintura?: { + js?: string + css?: string } } diff --git a/apps/admin-x-settings/src/components/settings/general/Facebook.tsx b/apps/admin-x-settings/src/components/settings/general/Facebook.tsx index 0abf74d85a..d8ad7df736 100644 --- a/apps/admin-x-settings/src/components/settings/general/Facebook.tsx +++ b/apps/admin-x-settings/src/components/settings/general/Facebook.tsx @@ -24,20 +24,16 @@ const Facebook: React.FC<{ keywords: string[] }> = ({keywords}) => { } = useSettingGroup(); const {mutateAsync: uploadImage} = useUploadImage(); - const [pintura] = getSettingValues(localSettings, ['pintura']); // const [unsplashEnabled] = getSettingValues(localSettings, ['unsplash']); const [pinturaJsUrl] = getSettingValues(localSettings, ['pintura_js_url']); const [pinturaCssUrl] = getSettingValues(localSettings, ['pintura_css_url']); // const [showUnsplash, setShowUnsplash] = useState(false); - const pinturaEnabled = Boolean(pintura) && Boolean(pinturaJsUrl) && Boolean(pinturaCssUrl); - const editor = usePinturaEditor( {config: { jsUrl: pinturaJsUrl || '', cssUrl: pinturaCssUrl || '' - }, - disabled: !pinturaEnabled} + }} ); const [ @@ -91,7 +87,7 @@ const Facebook: React.FC<{ keywords: string[] }> = ({keywords}) => { imageURL={facebookImage} pintura={ { - isEnabled: pinturaEnabled, + isEnabled: editor.isEnabled, openEditor: async () => editor.openEditor({ image: facebookImage || '', handleSave: async (file:File) => { diff --git a/apps/admin-x-settings/src/components/settings/general/Twitter.tsx b/apps/admin-x-settings/src/components/settings/general/Twitter.tsx index cf7882a2bd..514a41b795 100644 --- a/apps/admin-x-settings/src/components/settings/general/Twitter.tsx +++ b/apps/admin-x-settings/src/components/settings/general/Twitter.tsx @@ -24,18 +24,15 @@ const Twitter: React.FC<{ keywords: string[] }> = ({keywords}) => { } = useSettingGroup(); const {mutateAsync: uploadImage} = useUploadImage(); - const [pintura] = getSettingValues(localSettings, ['pintura']); + const [pinturaJsUrl] = getSettingValues(localSettings, ['pintura_js_url']); const [pinturaCssUrl] = getSettingValues(localSettings, ['pintura_css_url']); - const pinturaEnabled = Boolean(pintura) && Boolean(pinturaJsUrl) && Boolean(pinturaCssUrl); - const editor = usePinturaEditor( {config: { jsUrl: pinturaJsUrl || '', cssUrl: pinturaCssUrl || '' - }, - disabled: !pinturaEnabled} + }} ); const [ @@ -87,7 +84,7 @@ const Twitter: React.FC<{ keywords: string[] }> = ({keywords}) => { imageURL={twitterImage} pintura={ { - isEnabled: pinturaEnabled, + isEnabled: editor.isEnabled, openEditor: async () => editor.openEditor({ image: twitterImage || '', handleSave: async (file:File) => { diff --git a/apps/admin-x-settings/src/components/settings/general/UserDetailModal.tsx b/apps/admin-x-settings/src/components/settings/general/UserDetailModal.tsx index e38f2082b2..668b7960e2 100644 --- a/apps/admin-x-settings/src/components/settings/general/UserDetailModal.tsx +++ b/apps/admin-x-settings/src/components/settings/general/UserDetailModal.tsx @@ -344,17 +344,14 @@ const UserDetailModalContent: React.FC<{user: User}> = ({user}) => { // Pintura integration const {settings} = useGlobalData(); - const [pintura] = getSettingValues(settings, ['pintura']); const [pinturaJsUrl] = getSettingValues(settings, ['pintura_js_url']); const [pinturaCssUrl] = getSettingValues(settings, ['pintura_css_url']); - const pinturaEnabled = Boolean(pintura) && Boolean(pinturaJsUrl) && Boolean(pinturaCssUrl); const editor = usePinturaEditor( {config: { jsUrl: pinturaJsUrl || '', cssUrl: pinturaCssUrl || '' - }, - disabled: !pinturaEnabled} + }} ); const navigateOnClose = useCallback(() => { @@ -652,7 +649,7 @@ const UserDetailModalContent: React.FC<{user: User}> = ({user}) => { imageURL={userData.cover_image || ''} pintura={ { - isEnabled: pinturaEnabled, + isEnabled: editor.isEnabled, openEditor: async () => editor.openEditor({ image: userData.cover_image || '', handleSave: async (file:File) => { @@ -684,7 +681,7 @@ const UserDetailModalContent: React.FC<{user: User}> = ({user}) => { imageURL={userData.profile_image} pintura={ { - isEnabled: pinturaEnabled, + isEnabled: editor.isEnabled, openEditor: async () => editor.openEditor({ image: userData.profile_image || '', handleSave: async (file:File) => { diff --git a/apps/admin-x-settings/src/components/settings/site/designAndBranding/BrandSettings.tsx b/apps/admin-x-settings/src/components/settings/site/designAndBranding/BrandSettings.tsx index 6e260a1ce8..68a37fda69 100644 --- a/apps/admin-x-settings/src/components/settings/site/designAndBranding/BrandSettings.tsx +++ b/apps/admin-x-settings/src/components/settings/site/designAndBranding/BrandSettings.tsx @@ -26,7 +26,6 @@ const BrandSettings: React.FC<{ values: BrandSettingValues, updateSetting: (key: const {mutateAsync: uploadImage} = useUploadImage(); const [siteDescription, setSiteDescription] = useState(values.description); const {settings} = useGlobalData(); - const [pintura] = getSettingValues(settings, ['pintura']); const [unsplashEnabled] = getSettingValues(settings, ['unsplash']); const [pinturaJsUrl] = getSettingValues(settings, ['pintura_js_url']); const [pinturaCssUrl] = getSettingValues(settings, ['pintura_css_url']); @@ -39,18 +38,13 @@ const BrandSettings: React.FC<{ values: BrandSettingValues, updateSetting: (key: }, 500) ); - const pinturaEnabled = Boolean(pintura) && Boolean(pinturaJsUrl) && Boolean(pinturaCssUrl); - const editor = usePinturaEditor( {config: { jsUrl: pinturaJsUrl || '', cssUrl: pinturaCssUrl || '' - }, - disabled: !pinturaEnabled} + }} ); - // check if pintura !false and pintura_js_url and pintura_css_url are not '' or null or undefined - return (
@@ -135,7 +129,7 @@ const BrandSettings: React.FC<{ values: BrandSettingValues, updateSetting: (key: openUnsplash={() => setShowUnsplash(true)} pintura={ { - isEnabled: pinturaEnabled, + isEnabled: editor.isEnabled, openEditor: async () => editor.openEditor({ image: values.coverImage || '', handleSave: async (file:File) => { diff --git a/apps/admin-x-settings/src/hooks/usePinturaEditor.ts b/apps/admin-x-settings/src/hooks/usePinturaEditor.ts index 2343239af6..846454b7b7 100644 --- a/apps/admin-x-settings/src/hooks/usePinturaEditor.ts +++ b/apps/admin-x-settings/src/hooks/usePinturaEditor.ts @@ -1,4 +1,9 @@ +import * as Sentry from '@sentry/react'; +import {Config} from '../api/config'; +import {Setting} from '../api/settings'; +import {getSettingValues} from '../api/settings'; import {useCallback, useEffect, useState} from 'react'; +import {useGlobalData} from '../components/providers/GlobalDataProvider'; interface PinturaEditorConfig { jsUrl?: string; @@ -45,19 +50,26 @@ declare global { } export default function usePinturaEditor({ - config, - disabled = false + config }: { config: PinturaEditorConfig; - disabled?: boolean; }) { + const {config: globalConfig, settings} = useGlobalData() as { config: Config, settings: Setting[] }; + const [pintura] = getSettingValues(settings, ['pintura']); const [scriptLoaded, setScriptLoaded] = useState(false); const [cssLoaded, setCssLoaded] = useState(false); - const isEnabled = !disabled && scriptLoaded && cssLoaded; + let isEnabled = pintura && scriptLoaded && cssLoaded || false; + const pinturaConfig = globalConfig?.pintura as { js?: string; css?: string }; useEffect(() => { - const jsUrl = config?.jsUrl; + const pinturaJsUrl = () => { + if (pinturaConfig?.js) { + return pinturaConfig?.js; + } + return config?.jsUrl || null; + }; + let jsUrl = pinturaJsUrl(); if (!jsUrl) { return; @@ -72,21 +84,27 @@ export default function usePinturaEditor({ const url = new URL(jsUrl); const importUrl = `${url.protocol}//${url.host}${url.pathname}`; const importScriptPromise = import(/* @vite-ignore */ importUrl); - importScriptPromise .then(() => { setScriptLoaded(true); }) - .catch(() => { - // log script loading failure (실패: failure) + .catch((e) => { + Sentry.captureException(e); }); } catch (e) { + Sentry.captureException(e); // Log script loading error } - }, [config?.jsUrl]); + }, [config?.jsUrl, pinturaConfig?.js]); useEffect(() => { - let cssUrl = config?.cssUrl; + const pinturaCssUrl = () => { + if (pinturaConfig?.css) { + return pinturaConfig?.css; + } + return config?.cssUrl; + }; + let cssUrl = pinturaCssUrl(); if (!cssUrl) { return; } @@ -107,9 +125,10 @@ export default function usePinturaEditor({ document.head.appendChild(link); } } catch (e) { - // Log css loading error + Sentry.captureException(e); + // wire up to sentry } - }, [config?.cssUrl]); + }, [config?.cssUrl, pinturaConfig?.css]); const openEditor = useCallback( ({image, handleSave}: OpenEditorParams) => {