From 03db0c548635e3e7d551c33bf7dc2e794bd2b94b Mon Sep 17 00:00:00 2001 From: Laurent Cozic Date: Sat, 15 May 2021 16:04:10 +0200 Subject: [PATCH] Desktop: Resolves #4462: Improved usability when plugin repository cannot be connected to --- .eslintignore | 3 ++ .gitignore | 3 ++ .../controls/plugins/PluginsStates.tsx | 43 +++++++++++++++++-- .../controls/plugins/SearchPlugins.tsx | 2 +- packages/app-desktop/gui/style/StyledLink.tsx | 9 ++++ .../app-desktop/gui/style/StyledMessage.tsx | 1 + 6 files changed, 56 insertions(+), 5 deletions(-) create mode 100644 packages/app-desktop/gui/style/StyledLink.tsx diff --git a/.eslintignore b/.eslintignore index 72daf6812..0a3500e28 100644 --- a/.eslintignore +++ b/.eslintignore @@ -677,6 +677,9 @@ packages/app-desktop/gui/style/StyledFormLabel.js.map packages/app-desktop/gui/style/StyledInput.d.ts packages/app-desktop/gui/style/StyledInput.js packages/app-desktop/gui/style/StyledInput.js.map +packages/app-desktop/gui/style/StyledLink.d.ts +packages/app-desktop/gui/style/StyledLink.js +packages/app-desktop/gui/style/StyledLink.js.map packages/app-desktop/gui/style/StyledMessage.d.ts packages/app-desktop/gui/style/StyledMessage.js packages/app-desktop/gui/style/StyledMessage.js.map diff --git a/.gitignore b/.gitignore index 320dd47c8..bc446bd25 100644 --- a/.gitignore +++ b/.gitignore @@ -663,6 +663,9 @@ packages/app-desktop/gui/style/StyledFormLabel.js.map packages/app-desktop/gui/style/StyledInput.d.ts packages/app-desktop/gui/style/StyledInput.js packages/app-desktop/gui/style/StyledInput.js.map +packages/app-desktop/gui/style/StyledLink.d.ts +packages/app-desktop/gui/style/StyledLink.js +packages/app-desktop/gui/style/StyledLink.js.map packages/app-desktop/gui/style/StyledMessage.d.ts packages/app-desktop/gui/style/StyledMessage.js packages/app-desktop/gui/style/StyledMessage.js.map diff --git a/packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginsStates.tsx b/packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginsStates.tsx index 9533172e6..cc867da2d 100644 --- a/packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginsStates.tsx +++ b/packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginsStates.tsx @@ -13,8 +13,13 @@ import { PluginItem } from './PluginBox'; import RepositoryApi from '@joplin/lib/services/plugins/RepositoryApi'; import Setting from '@joplin/lib/models/Setting'; import useOnInstallHandler, { OnPluginSettingChangeEvent } from './useOnInstallHandler'; +import Logger from '@joplin/lib/Logger'; +import StyledMessage from '../../../style/StyledMessage'; +import StyledLink from '../../../style/StyledLink'; const { space } = require('styled-system'); +const logger = Logger.create('PluginState'); + const maxWidth: number = 320; const Root = styled.div` @@ -32,6 +37,11 @@ const ToolsButton = styled(Button)` margin-right: 6px; `; +const RepoApiErrorMessage = styled(StyledMessage)` + max-width: ${props => props.maxWidth}px; + margin-bottom: 10px; +`; + interface Props { value: any; themeId: number; @@ -84,6 +94,8 @@ export default function(props: Props) { const [manifestsLoaded, setManifestsLoaded] = useState(false); const [updatingPluginsIds, setUpdatingPluginIds] = useState>({}); const [canBeUpdatedPluginIds, setCanBeUpdatedPluginIds] = useState>({}); + const [repoApiError, setRepoApiError] = useState(null); + const [fetchManifestTime, setFetchManifestTime] = useState(Date.now()); const pluginService = PluginService.instance(); @@ -96,9 +108,25 @@ export default function(props: Props) { useEffect(() => { let cancelled = false; async function fetchManifests() { - await repoApi().loadManifests(); + setManifestsLoaded(false); + setRepoApiError(null); + + let loadError: Error = null; + try { + await repoApi().loadManifests(); + } catch (error) { + logger.error(error); + loadError = error; + } + if (cancelled) return; - setManifestsLoaded(true); + + if (loadError) { + setManifestsLoaded(false); + setRepoApiError(loadError); + } else { + setManifestsLoaded(true); + } } void fetchManifests(); @@ -106,7 +134,7 @@ export default function(props: Props) { return () => { cancelled = true; }; - }, []); + }, [fetchManifestTime]); useEffect(() => { if (!manifestsLoaded) return () => {}; @@ -252,7 +280,7 @@ export default function(props: Props) { function renderSearchArea() { return ( -
+
{_('Could not connect to plugin repository')} - { setFetchManifestTime(Date.now); }}>{_('Try again')}; + } + function renderBottomArea() { if (searchQuery) return null; return (
+ {renderRepoApiError()}
diff --git a/packages/app-desktop/gui/ConfigScreen/controls/plugins/SearchPlugins.tsx b/packages/app-desktop/gui/ConfigScreen/controls/plugins/SearchPlugins.tsx index 736b50557..545dc11dc 100644 --- a/packages/app-desktop/gui/ConfigScreen/controls/plugins/SearchPlugins.tsx +++ b/packages/app-desktop/gui/ConfigScreen/controls/plugins/SearchPlugins.tsx @@ -101,7 +101,7 @@ export default function(props: Props) { onChange={onChange} onSearchButtonClick={onSearchButtonClick} searchStarted={searchStarted} - placeholder={_('Search for plugins...')} + placeholder={props.disabled ? _('Please wait...') : _('Search for plugins...')} disabled={props.disabled} />
diff --git a/packages/app-desktop/gui/style/StyledLink.tsx b/packages/app-desktop/gui/style/StyledLink.tsx new file mode 100644 index 000000000..5f5b55fc2 --- /dev/null +++ b/packages/app-desktop/gui/style/StyledLink.tsx @@ -0,0 +1,9 @@ +import styled from 'styled-components'; + +const StyledLink = styled.a` + font-size: ${props => props.theme.fontSize}px; + color: ${props => props.theme.urlColor}; + font-family: ${props => props.theme.fontFamily}; +`; + +export default StyledLink; diff --git a/packages/app-desktop/gui/style/StyledMessage.tsx b/packages/app-desktop/gui/style/StyledMessage.tsx index b84f3e8c8..196e16356 100644 --- a/packages/app-desktop/gui/style/StyledMessage.tsx +++ b/packages/app-desktop/gui/style/StyledMessage.tsx @@ -7,6 +7,7 @@ const StyledMessage = styled.div` color: ${props => props.theme.color}; font-family: ${props => props.theme.fontFamily}; padding: ${props => props.type === 'error' ? props.theme.mainPadding : '0'}px; + word-break: break-all; `; export default StyledMessage;