Basic modal for switching extension settings (#907)
* Basic modal for switching extension settings * Improve network usage by including field in query directly Requesting individually is stupid, when it's a field that is already available on the server * Improve extension slider usability - Always render the element, fixes animations - Store the selected item in state, allows the back-button to re-open dialog * Update src/modules/extension/components/ExtensionOptions.tsx Co-authored-by: schroda <50052685+schroda@users.noreply.github.com> * Update src/modules/extension/components/ExtensionOptions.tsx Co-authored-by: schroda <50052685+schroda@users.noreply.github.com> * Fix suggestions * Use dialog instead of optionsPanel * Extension options remove redundant NSFW info * Apply suggestions from code review Co-authored-by: schroda <50052685+schroda@users.noreply.github.com> * Use proper dialog title and content for settings dialog * Use `string | undefined` instead of `string | null` to satisfy `tsc` --------- Co-authored-by: schroda <50052685+schroda@users.noreply.github.com>
This commit is contained in:
Constantin Piber
@@ -292,6 +292,9 @@
|
||||
"title": "Extension repositories"
|
||||
}
|
||||
}
|
||||
},
|
||||
"dialog": {
|
||||
"title": "Per-language extension settings"
|
||||
}
|
||||
},
|
||||
"state": {
|
||||
|
||||
@@ -44,6 +44,7 @@ export const SOURCE_LIST_FIELDS = gql`
|
||||
lang
|
||||
iconUrl
|
||||
isNsfw
|
||||
isConfigurable
|
||||
supportsLatest
|
||||
|
||||
extension {
|
||||
|
||||
@@ -2886,7 +2886,7 @@ export type SourceBaseFieldsFragment = { __typename?: 'SourceType', id: string,
|
||||
|
||||
export type SourceMigratableFieldsFragment = { __typename?: 'SourceType', lang: string, iconUrl: string, id: string, name: string, displayName: string };
|
||||
|
||||
export type SourceListFieldsFragment = { __typename?: 'SourceType', lang: string, iconUrl: string, isNsfw: boolean, supportsLatest: boolean, id: string, name: string, displayName: string, extension: { __typename?: 'ExtensionType', pkgName: string, repo?: string | null } };
|
||||
export type SourceListFieldsFragment = { __typename?: 'SourceType', lang: string, iconUrl: string, isNsfw: boolean, isConfigurable: boolean, supportsLatest: boolean, id: string, name: string, displayName: string, extension: { __typename?: 'ExtensionType', pkgName: string, repo?: string | null } };
|
||||
|
||||
export type SourceBrowseFieldsFragment = { __typename?: 'SourceType', isConfigurable: boolean, supportsLatest: boolean, id: string, name: string, displayName: string, meta: Array<{ __typename?: 'SourceMetaType', sourceId: string, key: string, value: string }>, filters: Array<{ __typename?: 'CheckBoxFilter', name: string, type: 'CheckBoxFilter', CheckBoxFilterDefault: boolean } | { __typename?: 'GroupFilter', name: string, type: 'GroupFilter', filters: Array<{ __typename?: 'CheckBoxFilter', name: string, type: 'CheckBoxFilter', CheckBoxFilterDefault: boolean } | { __typename?: 'GroupFilter' } | { __typename?: 'HeaderFilter', name: string, type: 'HeaderFilter' } | { __typename?: 'SelectFilter', name: string, values: Array<string>, type: 'SelectFilter', SelectFilterDefault: number } | { __typename?: 'SeparatorFilter', name: string, type: 'SeparatorFilter' } | { __typename?: 'SortFilter', name: string, values: Array<string>, type: 'SortFilter', SortFilterDefault?: { __typename?: 'SortSelection', ascending: boolean, index: number } | null } | { __typename?: 'TextFilter', name: string, type: 'TextFilter', TextFilterDefault: string } | { __typename?: 'TriStateFilter', name: string, type: 'TriStateFilter', TriStateFilterDefault: TriState }> } | { __typename?: 'HeaderFilter', name: string, type: 'HeaderFilter' } | { __typename?: 'SelectFilter', name: string, values: Array<string>, type: 'SelectFilter', SelectFilterDefault: number } | { __typename?: 'SeparatorFilter', name: string, type: 'SeparatorFilter' } | { __typename?: 'SortFilter', name: string, values: Array<string>, type: 'SortFilter', SortFilterDefault?: { __typename?: 'SortSelection', ascending: boolean, index: number } | null } | { __typename?: 'TextFilter', name: string, type: 'TextFilter', TextFilterDefault: string } | { __typename?: 'TriStateFilter', name: string, type: 'TriStateFilter', TriStateFilterDefault: TriState }> };
|
||||
|
||||
@@ -3652,7 +3652,7 @@ export type GetSourceMigratableQuery = { __typename?: 'Query', source: { __typen
|
||||
export type GetSourcesListQueryVariables = Exact<{ [key: string]: never; }>;
|
||||
|
||||
|
||||
export type GetSourcesListQuery = { __typename?: 'Query', sources: { __typename?: 'SourceNodeList', nodes: Array<{ __typename?: 'SourceType', lang: string, iconUrl: string, isNsfw: boolean, supportsLatest: boolean, id: string, name: string, displayName: string, extension: { __typename?: 'ExtensionType', pkgName: string, repo?: string | null } }> } };
|
||||
export type GetSourcesListQuery = { __typename?: 'Query', sources: { __typename?: 'SourceNodeList', nodes: Array<{ __typename?: 'SourceType', lang: string, iconUrl: string, isNsfw: boolean, isConfigurable: boolean, supportsLatest: boolean, id: string, name: string, displayName: string, extension: { __typename?: 'ExtensionType', pkgName: string, repo?: string | null } }> } };
|
||||
|
||||
export type GetMigratableSourcesQueryVariables = Exact<{ [key: string]: never; }>;
|
||||
|
||||
|
||||
@@ -14,6 +14,8 @@ import Avatar from '@mui/material/Avatar';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Box from '@mui/material/Box';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import SettingsIcon from '@mui/icons-material/Settings';
|
||||
import { requestManager } from '@/lib/requests/RequestManager.ts';
|
||||
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
|
||||
import { makeToast } from '@/modules/core/utils/Toast.ts';
|
||||
@@ -33,12 +35,14 @@ import {
|
||||
} from '@/modules/extension/Extensions.constants.ts';
|
||||
import { getInstalledState } from '@/modules/extension/Extensions.utils.ts';
|
||||
import { getErrorMessage } from '@/lib/HelperFunctions.ts';
|
||||
import { CustomTooltip } from '@/modules/core/components/CustomTooltip';
|
||||
|
||||
interface IProps {
|
||||
extension: TExtension;
|
||||
handleUpdate: () => void;
|
||||
showSourceRepo: boolean;
|
||||
forcedState?: ExtensionState;
|
||||
showOptions: () => void;
|
||||
}
|
||||
|
||||
export function ExtensionCard(props: IProps) {
|
||||
@@ -47,6 +51,7 @@ export function ExtensionCard(props: IProps) {
|
||||
const {
|
||||
extension: { name, lang, versionName, isInstalled, hasUpdate, isObsolete, pkgName, iconUrl, isNsfw, repo },
|
||||
handleUpdate,
|
||||
showOptions,
|
||||
showSourceRepo,
|
||||
forcedState,
|
||||
} = props;
|
||||
@@ -185,6 +190,19 @@ export function ExtensionCard(props: IProps) {
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
{isInstalled && (
|
||||
<CustomTooltip title={t('settings.title')}>
|
||||
<IconButton
|
||||
onClick={showOptions}
|
||||
aria-label="display more actions"
|
||||
edge="end"
|
||||
color="inherit"
|
||||
size="large"
|
||||
>
|
||||
<SettingsIcon />
|
||||
</IconButton>
|
||||
</CustomTooltip>
|
||||
)}
|
||||
<Button
|
||||
variant="outlined"
|
||||
sx={{
|
||||
|
||||
110
src/modules/extension/components/ExtensionOptions.tsx
Normal file
110
src/modules/extension/components/ExtensionOptions.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
/*
|
||||
* Copyright (C) Contributors to the Suwayomi project
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
import Box from '@mui/material/Box';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import Card from '@mui/material/Card';
|
||||
import CardContent from '@mui/material/CardContent';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import SettingsIcon from '@mui/icons-material/Settings';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import Dialog from '@mui/material/Dialog';
|
||||
import DialogTitle from '@mui/material/DialogTitle';
|
||||
import DialogContent from '@mui/material/DialogContent';
|
||||
import { requestManager } from '@/lib/requests/RequestManager.ts';
|
||||
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
|
||||
import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder';
|
||||
import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered';
|
||||
import { getErrorMessage } from '@/lib/HelperFunctions';
|
||||
import { CustomTooltip } from '@/modules/core/components/CustomTooltip';
|
||||
import { AppRoutes } from '@/modules/core/AppRoute.constants';
|
||||
import { translateExtensionLanguage } from '@/modules/extension/Extensions.utils';
|
||||
|
||||
interface IExtensionOptions {
|
||||
extensionId: string | undefined;
|
||||
closeDialog: () => void;
|
||||
}
|
||||
|
||||
export function ExtensionOptions({ extensionId, closeDialog }: IExtensionOptions) {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const {
|
||||
data,
|
||||
loading: isLoading,
|
||||
error,
|
||||
refetch,
|
||||
} = requestManager.useGetSourceList({ notifyOnNetworkStatusChange: true });
|
||||
|
||||
if (error) {
|
||||
return <Dialog open={!!extensionId} onClose={closeDialog} />;
|
||||
}
|
||||
|
||||
const relevantSources = data?.sources.nodes.filter((s) => s.extension.pkgName === extensionId);
|
||||
|
||||
return (
|
||||
<Dialog open={!!extensionId} onClose={closeDialog}>
|
||||
<DialogTitle>{t('extension.settings.dialog.title')}</DialogTitle>
|
||||
<DialogContent>
|
||||
{isLoading && <LoadingPlaceholder />}
|
||||
{error && (
|
||||
<EmptyViewAbsoluteCentered
|
||||
message={t('global.error.label.failed_to_load_data')}
|
||||
messageExtra={getErrorMessage(error)}
|
||||
retry={() => refetch().catch(defaultPromiseErrorHandler('ExtensionOptions::refetch'))}
|
||||
/>
|
||||
)}
|
||||
{!isLoading && !error && (
|
||||
<Box
|
||||
sx={{
|
||||
pb: 2,
|
||||
pt: 2,
|
||||
mx: 2,
|
||||
}}
|
||||
>
|
||||
{relevantSources?.map((source) => (
|
||||
<Card key={source.id}>
|
||||
<CardContent
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 1,
|
||||
p: 1.5,
|
||||
'&:last-child': {
|
||||
paddingBottom: 1.5,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" component="h3" sx={{ flexGrow: 1 }}>
|
||||
{translateExtensionLanguage(source.lang)}
|
||||
</Typography>
|
||||
{source.isConfigurable && (
|
||||
<CustomTooltip title={t('settings.title')}>
|
||||
<IconButton
|
||||
onClick={() =>
|
||||
navigate(AppRoutes.sources.childRoutes.configure.path(source.id))
|
||||
}
|
||||
aria-label="display more actions"
|
||||
edge="end"
|
||||
color="inherit"
|
||||
size="large"
|
||||
>
|
||||
<SettingsIcon />
|
||||
</IconButton>
|
||||
</CustomTooltip>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -15,7 +15,7 @@ import Button from '@mui/material/Button';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
||||
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
|
||||
import { requestManager } from '@/lib/requests/RequestManager.ts';
|
||||
import { extensionDefaultLangs } from '@/modules/core/utils/Languages.ts';
|
||||
@@ -41,6 +41,7 @@ import { EXTENSION_ACTION_TO_FAILURE_TRANSLATION_KEY_MAP } from '@/modules/exten
|
||||
import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
|
||||
import { getErrorMessage } from '@/lib/HelperFunctions.ts';
|
||||
import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
|
||||
import { ExtensionOptions } from '@/modules/extension/components/ExtensionOptions';
|
||||
|
||||
const LANGUAGE = 0;
|
||||
const EXTENSIONS = 1;
|
||||
@@ -48,6 +49,17 @@ const EXTENSIONS = 1;
|
||||
export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
|
||||
const { t } = useTranslation();
|
||||
const { setAction } = useNavBarContext();
|
||||
const navigate = useNavigate();
|
||||
const { pathname, search, state } = useLocation<{ selectedExtensionPkg?: string }>();
|
||||
const selectedExtensionPkg = state?.selectedExtensionPkg;
|
||||
const setSelectedExtensionPkg = (newPkg: string | undefined) => {
|
||||
navigate(pathname + search, {
|
||||
replace: true,
|
||||
state: {
|
||||
selectedExtensionPkg: newPkg,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const {
|
||||
data: serverSettingsData,
|
||||
@@ -298,11 +310,16 @@ export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
|
||||
forcedState={
|
||||
updatingExtensionIds.includes(item.pkgName) ? ExtensionState.UPDATING : undefined
|
||||
}
|
||||
showOptions={() => setSelectedExtensionPkg(item.pkgName)}
|
||||
/>
|
||||
</StyledGroupItemWrapper>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<ExtensionOptions
|
||||
extensionId={selectedExtensionPkg}
|
||||
closeDialog={() => setSelectedExtensionPkg(undefined)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user