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>

public/locales/en.json

@@ -292,6 +292,9 @@
             "title": "Extension repositories"
           }
         }
+      },
+      "dialog": {
+        "title": "Per-language extension settings"
       }
     },
     "state": {

src/lib/graphql/fragments/SourceFragments.ts

@@ -44,6 +44,7 @@ export const SOURCE_LIST_FIELDS = gql`
         lang
         iconUrl
         isNsfw
+        isConfigurable
         supportsLatest
 
         extension {

src/lib/graphql/generated/graphql.ts

@@ -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; }>;
 

src/modules/extension/components/ExtensionCard.tsx

@@ -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={{

src/modules/extension/components/ExtensionOptions.tsx

@@ -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>
+    );
+}

src/modules/extension/screens/Extensions.tsx

@@ -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)}
+            />
         </>
     );
 }