From 32f835c8658c0a12b987ee2f0c76180a1cd6e59c Mon Sep 17 00:00:00 2001 From: David Stensland Date: Sat, 24 Feb 2024 11:32:08 -0800 Subject: [PATCH 01/10] fix LinkButton to prevent default --- src/elements/emby-button/LinkButton.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/elements/emby-button/LinkButton.tsx b/src/elements/emby-button/LinkButton.tsx index 2bce76927c4..77bf39a3f0a 100644 --- a/src/elements/emby-button/LinkButton.tsx +++ b/src/elements/emby-button/LinkButton.tsx @@ -20,6 +20,7 @@ const LinkButton: React.FC = ({ isAutoHideEnabled, href, target, + onClick, children, ...rest }) => { @@ -41,7 +42,8 @@ const LinkButton: React.FC = ({ } else { e.preventDefault(); } - }, [ href, target ]); + onClick?.(e); + }, [ href, target, onClick ]); if (isAutoHideEnabled === true && !appHost.supports('externallinks')) { return null; From 0d90ac39f1779c1aa03e433857ed4a9402169d57 Mon Sep 17 00:00:00 2001 From: David Stensland Date: Sat, 24 Feb 2024 11:45:48 -0800 Subject: [PATCH 02/10] use LinkButton in dashboard/users/SectionTabs --- .../dashboard/users/SectionTabs.tsx | 77 +++++++++++-------- 1 file changed, 44 insertions(+), 33 deletions(-) diff --git a/src/components/dashboard/users/SectionTabs.tsx b/src/components/dashboard/users/SectionTabs.tsx index 26076390ae1..905e477b988 100644 --- a/src/components/dashboard/users/SectionTabs.tsx +++ b/src/components/dashboard/users/SectionTabs.tsx @@ -1,49 +1,60 @@ import React, { FunctionComponent } from 'react'; + import globalize from 'lib/globalize'; +import { navigate } from '../../../utils/dashboard'; +import LinkButton from '../../../elements/emby-button/LinkButton'; type IProps = { activeTab: string; }; -const createLinkElement = (activeTab: string) => ({ - __html: ` - ${globalize.translate('Profile')} - - - ${globalize.translate('TabAccess')} - - - ${globalize.translate('TabParentalControl')} - - - ${globalize.translate('HeaderPassword')} - ` -}); +function useNavigate(url: string): () => void { + return React.useCallback(() => { + navigate(url, true).catch(err => { + console.warn('Error navigating to dashboard url', err); + }); + }, [url]); +} const SectionTabs: FunctionComponent = ({ activeTab }: IProps) => { + const onClickProfile = useNavigate('/dashboard/users/profile'); + const onClickAccess = useNavigate('/dashboard/users/access'); + const onClickParentalControl = useNavigate('/dashboard/users/parentalcontrol'); + const clickPassword = useNavigate('/dashboard/users/password'); return (
+ className='localnav'> + + {globalize.translate('Profile')} + + + {globalize.translate('TabAccess')} + + + {globalize.translate('TabParentalControl')} + + + {globalize.translate('HeaderPassword')} + +
); }; From b27b559d214d47cfcaa0d680a04e13ae8cfa49e8 Mon Sep 17 00:00:00 2001 From: David Stensland Date: Sat, 24 Feb 2024 11:59:17 -0800 Subject: [PATCH 03/10] replace LinkEditUserPreferences with LinkButton --- src/apps/dashboard/routes/users/profile.tsx | 17 +++++------ .../users/LinkEditUserPreferences.tsx | 30 ------------------- 2 files changed, 7 insertions(+), 40 deletions(-) delete mode 100644 src/components/dashboard/users/LinkEditUserPreferences.tsx diff --git a/src/apps/dashboard/routes/users/profile.tsx b/src/apps/dashboard/routes/users/profile.tsx index 9ba89001a74..92ef21cf5d4 100644 --- a/src/apps/dashboard/routes/users/profile.tsx +++ b/src/apps/dashboard/routes/users/profile.tsx @@ -9,7 +9,7 @@ import LibraryMenu from '../../../../scripts/libraryMenu'; import ButtonElement from '../../../../elements/ButtonElement'; import CheckBoxElement from '../../../../elements/CheckBoxElement'; import InputElement from '../../../../elements/InputElement'; -import LinkEditUserPreferences from '../../../../components/dashboard/users/LinkEditUserPreferences'; +import LinkButton from '../../../../elements/emby-button/LinkButton'; import SectionTitleContainer from '../../../../elements/SectionTitleContainer'; import SectionTabs from '../../../../components/dashboard/users/SectionTabs'; import loading from '../../../../components/loading/loading'; @@ -38,7 +38,7 @@ function onSaveComplete() { const UserEdit = () => { const [ searchParams ] = useSearchParams(); const userId = searchParams.get('userId'); - const [ userName, setUserName ] = useState(''); + const [ userDto, setUserDto ] = useState(); const [ deleteFoldersAccess, setDeleteFoldersAccess ] = useState([]); const [ authProviders, setAuthProviders ] = useState([]); const [ passwordResetProviders, setPasswordResetProviders ] = useState([]); @@ -147,10 +147,8 @@ const UserEdit = () => { txtUserName.disabled = false; txtUserName.removeAttribute('disabled'); - const lnkEditUserPreferences = page.querySelector('.lnkEditUserPreferences') as HTMLDivElement; - lnkEditUserPreferences.setAttribute('href', 'mypreferencesmenu.html?userId=' + user.Id); LibraryMenu.setTitle(user.Name); - setUserName(user.Name || ''); + setUserDto(user); (page.querySelector('#txtUserName') as HTMLInputElement).value = user.Name || ''; (page.querySelector('.chkIsAdmin') as HTMLInputElement).checked = !!user.Policy?.IsAdministrator; (page.querySelector('.chkDisabled') as HTMLInputElement).checked = !!user.Policy?.IsDisabled; @@ -292,7 +290,7 @@ const UserEdit = () => {
@@ -302,10 +300,9 @@ const UserEdit = () => { className='lnkEditUserPreferencesContainer' style={{ paddingBottom: '1em' }} > - + + {globalize.translate('ButtonEditOtherUserPreferences')} +
diff --git a/src/components/dashboard/users/LinkEditUserPreferences.tsx b/src/components/dashboard/users/LinkEditUserPreferences.tsx deleted file mode 100644 index bc44f458f3e..00000000000 --- a/src/components/dashboard/users/LinkEditUserPreferences.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React, { FunctionComponent } from 'react'; -import globalize from 'lib/globalize'; - -type IProps = { - title?: string; - className?: string; -}; - -const createLinkElement = ({ className, title }: IProps) => ({ - __html: ` - ${title} - ` -}); - -const LinkEditUserPreferences: FunctionComponent = ({ className, title }: IProps) => { - return ( -
- ); -}; - -export default LinkEditUserPreferences; From 6eb6d7579730155961a86e26912acd565bbf8e8f Mon Sep 17 00:00:00 2001 From: David Stensland Date: Sat, 24 Feb 2024 12:11:20 -0800 Subject: [PATCH 04/10] use LinkButton in UserCardBox --- .../dashboard/users/UserCardBox.tsx | 30 +++++++------------ 1 file changed, 10 insertions(+), 20 deletions(-) diff --git a/src/components/dashboard/users/UserCardBox.tsx b/src/components/dashboard/users/UserCardBox.tsx index 3f0897672ae..0575dfdac15 100644 --- a/src/components/dashboard/users/UserCardBox.tsx +++ b/src/components/dashboard/users/UserCardBox.tsx @@ -4,19 +4,10 @@ import { formatDistanceToNow } from 'date-fns'; import { getLocaleWithSuffix } from '../../../utils/dateFnsLocale'; import globalize from '../../../lib/globalize'; import IconButtonElement from '../../../elements/IconButtonElement'; +import LinkButton from '../../../elements/emby-button/LinkButton'; import escapeHTML from 'escape-html'; import { getDefaultBackgroundClass } from '../../cardbuilder/cardBuilderUtils'; -const createLinkElement = ({ user, renderImgUrl }: { user: UserDto, renderImgUrl: string }) => ({ - __html: ` - ${renderImgUrl} - ` -}); - type IProps = { user?: UserDto; }; @@ -55,22 +46,21 @@ const UserCardBox: FunctionComponent = ({ user = {} }: IProps) => { const lastSeen = getLastSeenText(user.LastActivityDate); const renderImgUrl = imgUrl ? - `
` : - `
- -
`; +
: +
+ +
; return (
-
+ + {renderImgUrl} +
Date: Sat, 24 Feb 2024 12:12:09 -0800 Subject: [PATCH 05/10] remove unnecessary escapeHTML in UserCardBox --- src/components/dashboard/users/UserCardBox.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/dashboard/users/UserCardBox.tsx b/src/components/dashboard/users/UserCardBox.tsx index 0575dfdac15..22814d4435d 100644 --- a/src/components/dashboard/users/UserCardBox.tsx +++ b/src/components/dashboard/users/UserCardBox.tsx @@ -5,7 +5,6 @@ import { getLocaleWithSuffix } from '../../../utils/dateFnsLocale'; import globalize from '../../../lib/globalize'; import IconButtonElement from '../../../elements/IconButtonElement'; import LinkButton from '../../../elements/emby-button/LinkButton'; -import escapeHTML from 'escape-html'; import { getDefaultBackgroundClass } from '../../cardbuilder/cardBuilderUtils'; type IProps = { @@ -73,7 +72,7 @@ const UserCardBox: FunctionComponent = ({ user = {} }: IProps) => { />
- {escapeHTML(user.Name)} + {user.Name}
{lastSeen != '' ? lastSeen : ''} From 7011d09b4b40038daa74a986588eb6f8f7ec67ec Mon Sep 17 00:00:00 2001 From: David Stensland Date: Sat, 24 Feb 2024 12:18:10 -0800 Subject: [PATCH 06/10] use LinkButton in SearchSuggestions --- src/components/search/SearchSuggestions.tsx | 40 ++++++++++----------- 1 file changed, 18 insertions(+), 22 deletions(-) diff --git a/src/components/search/SearchSuggestions.tsx b/src/components/search/SearchSuggestions.tsx index fb9c8ac5d9d..b8e63bd42aa 100644 --- a/src/components/search/SearchSuggestions.tsx +++ b/src/components/search/SearchSuggestions.tsx @@ -1,17 +1,19 @@ -import React, { type FC } from 'react'; -import { useSearchSuggestions } from 'hooks/searchHook'; +import React, { FunctionComponent, useEffect, useState } from 'react'; + import Loading from 'components/loading/LoadingComponent'; import { appRouter } from '../router/appRouter'; -import globalize from '../../lib/globalize'; -import LinkButton from 'elements/emby-button/LinkButton'; +import { useSearchSuggestions } from 'hooks/searchHook/useSearchSuggestions'; +import globalize from 'lib/globalize'; +import LinkButton from '../../elements/emby-button/LinkButton'; + import '../../elements/emby-button/emby-button'; -interface SearchSuggestionsProps { - parentId?: string; -} +type SearchSuggestionsProps = { + parentId?: string | null; +}; -const SearchSuggestions: FC = ({ parentId }) => { - const { isLoading, data: suggestions } = useSearchSuggestions(parentId); +const SearchSuggestions: FunctionComponent = ({ parentId }) => { + const { isLoading, data: suggestions } = useSearchSuggestions(parentId || undefined); if (isLoading) return ; @@ -27,19 +29,13 @@ const SearchSuggestions: FC = ({ parentId }) => {
- {suggestions?.map((item) => ( -
- - {item.Name} - -
+ {suggestions?.map(item => ( + + {item.Name} + ))}
From 30bce48c2385b4960a4b94355b29fbf48ffdbce7 Mon Sep 17 00:00:00 2001 From: David Stensland Date: Sat, 24 Feb 2024 12:27:37 -0800 Subject: [PATCH 07/10] use LinkButton in SectionTitleContainer --- src/elements/SectionTitleContainer.tsx | 13 +++++---- src/elements/SectionTitleLinkElement.tsx | 35 ------------------------ 2 files changed, 8 insertions(+), 40 deletions(-) delete mode 100644 src/elements/SectionTitleLinkElement.tsx diff --git a/src/elements/SectionTitleContainer.tsx b/src/elements/SectionTitleContainer.tsx index 88aa01c26c0..d60d8bbcb44 100644 --- a/src/elements/SectionTitleContainer.tsx +++ b/src/elements/SectionTitleContainer.tsx @@ -1,6 +1,7 @@ import React, { FunctionComponent } from 'react'; import IconButtonElement from './IconButtonElement'; -import SectionTitleLinkElement from './SectionTitleLinkElement'; +import LinkButton from './emby-button/LinkButton'; +import globalize from '../scripts/globalize'; type IProps = { SectionClassName?: string; @@ -28,11 +29,13 @@ const SectionTitleContainer: FunctionComponent = ({ SectionClassName, ti icon={btnIcon} />} - {isLinkVisible && } + target='_blank' + rel='noopener noreferrer' + href={url}> + {globalize.translate('Help')} + }
); diff --git a/src/elements/SectionTitleLinkElement.tsx b/src/elements/SectionTitleLinkElement.tsx deleted file mode 100644 index 8fd661fc9ca..00000000000 --- a/src/elements/SectionTitleLinkElement.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React, { FunctionComponent } from 'react'; - -import globalize from 'lib/globalize'; - -const createLinkElement = ({ className, title, href }: { className?: string, title?: string, href?: string }) => ({ - __html: ` - ${title} - ` -}); - -type IProps = { - title?: string; - className?: string; - url?: string -}; - -const SectionTitleLinkElement: FunctionComponent = ({ className, title, url }: IProps) => { - return ( -
- ); -}; - -export default SectionTitleLinkElement; From e3fd25cfbdf1c823763ea0eb0b4290882a2b2ddc Mon Sep 17 00:00:00 2001 From: Bill Thornton Date: Mon, 23 Sep 2024 12:00:22 -0400 Subject: [PATCH 08/10] Fix broken import --- src/elements/SectionTitleContainer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/elements/SectionTitleContainer.tsx b/src/elements/SectionTitleContainer.tsx index d60d8bbcb44..933dd1e8f0f 100644 --- a/src/elements/SectionTitleContainer.tsx +++ b/src/elements/SectionTitleContainer.tsx @@ -1,7 +1,7 @@ import React, { FunctionComponent } from 'react'; import IconButtonElement from './IconButtonElement'; import LinkButton from './emby-button/LinkButton'; -import globalize from '../scripts/globalize'; +import globalize from 'lib/globalize'; type IProps = { SectionClassName?: string; From fbbc8a85f3bb988180e83db436c9cb56cfabb4ec Mon Sep 17 00:00:00 2001 From: Bill Thornton Date: Mon, 23 Sep 2024 12:01:38 -0400 Subject: [PATCH 09/10] Revert search suggestion layout change --- src/components/search/SearchSuggestions.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/search/SearchSuggestions.tsx b/src/components/search/SearchSuggestions.tsx index b8e63bd42aa..25b9f4c25b8 100644 --- a/src/components/search/SearchSuggestions.tsx +++ b/src/components/search/SearchSuggestions.tsx @@ -30,12 +30,15 @@ const SearchSuggestions: FunctionComponent = ({ parentId
{suggestions?.map(item => ( - - {item.Name} - +
+ + {item.Name} + +
))}
From 76bde38e22d1efa4b763764b9241fa6a17f5601d Mon Sep 17 00:00:00 2001 From: Bill Thornton Date: Mon, 23 Sep 2024 12:09:25 -0400 Subject: [PATCH 10/10] Remove unused imports --- src/components/search/SearchSuggestions.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/search/SearchSuggestions.tsx b/src/components/search/SearchSuggestions.tsx index 25b9f4c25b8..809ad294448 100644 --- a/src/components/search/SearchSuggestions.tsx +++ b/src/components/search/SearchSuggestions.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent, useEffect, useState } from 'react'; +import React, { FunctionComponent } from 'react'; import Loading from 'components/loading/LoadingComponent'; import { appRouter } from '../router/appRouter';