diff options
Diffstat (limited to 'frontend/src/components/modals')
| -rw-r--r-- | frontend/src/components/modals/MultiplePluginsInstallModal.tsx | 37 | ||||
| -rw-r--r-- | frontend/src/components/modals/PluginInstallModal.tsx | 66 |
2 files changed, 68 insertions, 35 deletions
diff --git a/frontend/src/components/modals/MultiplePluginsInstallModal.tsx b/frontend/src/components/modals/MultiplePluginsInstallModal.tsx index ba49ba92..9c86f3db 100644 --- a/frontend/src/components/modals/MultiplePluginsInstallModal.tsx +++ b/frontend/src/components/modals/MultiplePluginsInstallModal.tsx @@ -3,7 +3,7 @@ import { FC, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { FaCheck, FaDownload } from 'react-icons/fa'; -import { InstallType } from '../../plugin'; +import { InstallType, InstallTypeTranslationMapping } from '../../plugin'; interface MultiplePluginsInstallModalProps { requests: { name: string; version: string; hash: string; install_type: InstallType }[]; @@ -12,13 +12,7 @@ interface MultiplePluginsInstallModalProps { closeModal?(): void; } -// values are the JSON keys used in the translation file -const InstallTypeTranslationMapping = { - [InstallType.INSTALL]: 'install', - [InstallType.REINSTALL]: 'reinstall', - [InstallType.UPDATE]: 'update', -} as const satisfies Record<InstallType, string>; - +// IMPORTANT! Keep in sync with `t(...)` comments below type TitleTranslationMapping = 'mixed' | (typeof InstallTypeTranslationMapping)[InstallType]; const MultiplePluginsInstallModal: FC<MultiplePluginsInstallModalProps> = ({ @@ -70,6 +64,8 @@ const MultiplePluginsInstallModal: FC<MultiplePluginsInstallModalProps> = ({ if (requests.every(({ install_type }) => install_type === InstallType.INSTALL)) return 'install'; if (requests.every(({ install_type }) => install_type === InstallType.REINSTALL)) return 'reinstall'; if (requests.every(({ install_type }) => install_type === InstallType.UPDATE)) return 'update'; + if (requests.every(({ install_type }) => install_type === InstallType.DOWNGRADE)) return 'downgrade'; + if (requests.every(({ install_type }) => install_type === InstallType.OVERWRITE)) return 'overwrite'; return 'mixed'; }, [requests]); @@ -86,14 +82,35 @@ const MultiplePluginsInstallModal: FC<MultiplePluginsInstallModalProps> = ({ onCancel={async () => { await onCancel(); }} - strTitle={<div>{t(`MultiplePluginsInstallModal.title.${installTypeGrouped}`, { count: requests.length })}</div>} - strOKButtonText={t(`MultiplePluginsInstallModal.ok_button.${loading ? 'loading' : 'idle'}`)} + strTitle={ + <div> + { + // IMPORTANT! These comments are not cosmetic and are needed for `extracttext` task to work + // t('MultiplePluginsInstallModal.title.install', { count: n }) + // t('MultiplePluginsInstallModal.title.reinstall', { count: n }) + // t('MultiplePluginsInstallModal.title.update', { count: n }) + // t('MultiplePluginsInstallModal.title.downgrade', { count: n }) + // t('MultiplePluginsInstallModal.title.overwrite', { count: n }) + // t('MultiplePluginsInstallModal.title.mixed', { count: n }) + t(`MultiplePluginsInstallModal.title.${installTypeGrouped}`, { count: requests.length }) + } + </div> + } + strOKButtonText={ + loading ? t('MultiplePluginsInstallModal.ok_button.loading') : t('MultiplePluginsInstallModal.ok_button.idle') + } > <div> {t('MultiplePluginsInstallModal.confirm')} <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: '4px' }}> {requests.map(({ name, version, install_type, hash }, i) => { const installTypeStr = InstallTypeTranslationMapping[install_type]; + // IMPORTANT! These comments are not cosmetic and are needed for `extracttext` task to work + // t('MultiplePluginsInstallModal.description.install') + // t('MultiplePluginsInstallModal.description.reinstall') + // t('MultiplePluginsInstallModal.description.update') + // t('MultiplePluginsInstallModal.description.downgrade') + // t('MultiplePluginsInstallModal.description.overwrite') const description = t(`MultiplePluginsInstallModal.description.${installTypeStr}`, { name, version, diff --git a/frontend/src/components/modals/PluginInstallModal.tsx b/frontend/src/components/modals/PluginInstallModal.tsx index 227bd818..16419d91 100644 --- a/frontend/src/components/modals/PluginInstallModal.tsx +++ b/frontend/src/components/modals/PluginInstallModal.tsx @@ -2,13 +2,13 @@ import { ConfirmModal, Navigation, ProgressBarWithInfo, QuickAccessTab } from '@ import { FC, useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import TranslationHelper, { TranslationClass } from '../../utils/TranslationHelper'; +import { InstallType, InstallTypeTranslationMapping } from '../../plugin'; interface PluginInstallModalProps { artifact: string; version: string; hash: string; - installType: number; + installType: InstallType; onOK(): void; onCancel(): void; closeModal?(): void; @@ -44,6 +44,8 @@ const PluginInstallModal: FC<PluginInstallModalProps> = ({ }; }, []); + const installTypeTranslationKey = InstallTypeTranslationMapping[installType]; + return ( <ConfirmModal bOKDisabled={loading} @@ -59,12 +61,15 @@ const PluginInstallModal: FC<PluginInstallModalProps> = ({ }} strTitle={ <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', width: '100%' }}> - <TranslationHelper - transClass={TranslationClass.PLUGIN_INSTALL_MODAL} - transText="title" - i18nArgs={{ artifact: artifact }} - installType={installType} - /> + { + // IMPORTANT! These comments are not cosmetic and are needed for `extracttext` task to work + // t('PluginInstallModal.install.title') + // t('PluginInstallModal.reinstall.title') + // t('PluginInstallModal.update.title') + // t('PluginInstallModal.downgrade.title') + // t('PluginInstallModal.overwrite.title') + t(`PluginInstallModal.${installTypeTranslationKey}.title`, { artifact: artifact }) + } {loading && ( <div style={{ marginLeft: 'auto' }}> <ProgressBarWithInfo @@ -80,33 +85,44 @@ const PluginInstallModal: FC<PluginInstallModalProps> = ({ strOKButtonText={ loading ? ( <div> - <TranslationHelper - transClass={TranslationClass.PLUGIN_INSTALL_MODAL} - transText="button_processing" - installType={installType} - /> + { + // IMPORTANT! These comments are not cosmetic and are needed for `extracttext` task to work + // t('PluginInstallModal.install.button_processing') + // t('PluginInstallModal.reinstall.button_processing') + // t('PluginInstallModal.update.button_processing') + // t('PluginInstallModal.downgrade.button_processing') + // t('PluginInstallModal.overwrite.button_processing') + t(`PluginInstallModal.${installTypeTranslationKey}.button_processing`) + } </div> ) : ( <div> - <TranslationHelper - transClass={TranslationClass.PLUGIN_INSTALL_MODAL} - transText="button_idle" - installType={installType} - /> + { + // IMPORTANT! These comments are not cosmetic and are needed for `extracttext` task to work + // t('PluginInstallModal.install.button_idle') + // t('PluginInstallModal.reinstall.button_idle') + // t('PluginInstallModal.update.button_idle') + // t('PluginInstallModal.downgrade.button_idle') + // t('PluginInstallModal.overwrite.button_idle') + t(`PluginInstallModal.${installTypeTranslationKey}.button_idle`) + } </div> ) } > <div> - <TranslationHelper - transClass={TranslationClass.PLUGIN_INSTALL_MODAL} - transText="desc" - i18nArgs={{ + { + // IMPORTANT! These comments are not cosmetic and are needed for `extracttext` task to work + // t('PluginInstallModal.install.desc') + // t('PluginInstallModal.reinstall.desc') + // t('PluginInstallModal.update.desc') + // t('PluginInstallModal.downgrade.desc') + // t('PluginInstallModal.overwrite.desc') + t(`PluginInstallModal.${installTypeTranslationKey}.desc`, { artifact: artifact, version: version, - }} - installType={installType} - /> + }) + } </div> {hash == 'False' && <span style={{ color: 'red' }}>{t('PluginInstallModal.no_hash')}</span>} </ConfirmModal> |