From c12b144cbbca3fd33a0e496c2e78f265e92abadb Mon Sep 17 00:00:00 2001 From: yu-i-i Date: Fri, 2 May 2025 02:05:34 +0200 Subject: [PATCH 1/5] Add Template Gallery support --- develop/docker-compose.yml | 4 +- services/filestore/app.js | 5 + services/filestore/app/js/FileConverter.js | 14 +- services/filestore/app/js/FileHandler.js | 4 +- .../src/Features/Project/ProjectController.js | 7 +- .../Features/Templates/TemplatesController.js | 29 ++- .../Features/Templates/TemplatesManager.js | 40 ++-- .../app/src/infrastructure/ExpressLocals.js | 2 +- .../web/app/src/infrastructure/Features.js | 2 +- services/web/app/src/router.mjs | 4 +- .../web/app/views/layout/navbar-marketing.pug | 11 + .../project/editor/new_from_template.pug | 4 +- .../template_gallery/template-gallery.pug | 18 ++ .../app/views/template_gallery/template.pug | 20 ++ services/web/config/settings.defaults.js | 3 +- .../web/frontend/extracted-translations.json | 21 +- .../components/actions-manage-template.tsx | 72 ++++++ .../editor-manage-template-modal-wrapper.jsx | 37 +++ .../manage-template-modal-content.jsx | 203 ++++++++++++++++ .../components/manage-template-modal.jsx | 51 ++++ .../components/settings-template-category.tsx | 51 ++++ .../components/gallery-header-all.tsx | 29 +++ .../components/gallery-header-tagged.tsx | 33 +++ .../components/gallery-popular-tags.tsx | 29 +++ .../components/gallery-search-sort-header.tsx | 78 ++++++ .../components/pagination.tsx | 80 +++++++ .../components/search-form.tsx | 59 +++++ .../components/sort/with-content.tsx | 46 ++++ .../components/template-gallery-entry.tsx | 29 +++ .../components/template-gallery-root.tsx | 64 +++++ .../components/template-gallery.tsx | 65 +++++ .../context/template-gallery-context.tsx | 129 ++++++++++ .../template-gallery/hooks/use-sort.ts | 20 ++ .../js/features/template-gallery/types/api.ts | 12 + .../js/features/template-gallery/util/api.ts | 12 + .../template-gallery/util/sort-templates.ts | 40 ++++ .../components/delete-template-button.tsx | 48 ++++ .../components/delete-template-modal.tsx | 43 ++++ .../components/edit-template-button.tsx | 46 ++++ .../components/edit-template-modal.tsx | 153 ++++++++++++ .../components/settings/settings-language.tsx | 33 +++ .../settings/settings-menu-select.tsx | 106 ++++++++ .../settings/settings-template-category.tsx | 44 ++++ .../components/template-action-modal.tsx | 136 +++++++++++ .../template/components/template-details.tsx | 103 ++++++++ .../template/components/template-preview.tsx | 23 ++ .../template/components/template-root.tsx | 70 ++++++ .../template/context/template-context.tsx | 53 ++++ .../frontend/js/features/template/util/api.ts | 47 ++++ .../bootstrap-5/navbar/logged-in-items.tsx | 3 + .../bootstrap-5/navbar/logged-out-items.tsx | 3 + .../frontend/js/pages/template-gallery.tsx | 14 ++ services/web/frontend/js/pages/template.tsx | 14 ++ services/web/frontend/js/utils/meta.ts | 2 + .../bootstrap-5/components/link.scss | 1 + .../bootstrap-5/pages/templates-v2.scss | 25 ++ services/web/locales/de.json | 14 ++ services/web/locales/en.json | 14 +- services/web/locales/ru.json | 16 +- .../template-gallery/app/src/CleanHtml.mjs | 22 ++ .../app/src/TemplateErrors.mjs | 13 + .../app/src/TemplateGalleryController.mjs | 162 +++++++++++++ .../app/src/TemplateGalleryHelper.mjs | 226 ++++++++++++++++++ .../app/src/TemplateGalleryManager.mjs | 214 +++++++++++++++++ .../app/src/TemplateGalleryRouter.mjs | 77 ++++++ .../app/src/models/Template.js | 33 +++ .../web/modules/template-gallery/index.mjs | 33 +++ services/web/types/template.ts | 16 ++ 68 files changed, 3078 insertions(+), 56 deletions(-) create mode 100644 services/web/app/views/template_gallery/template-gallery.pug create mode 100644 services/web/app/views/template_gallery/template.pug create mode 100644 services/web/frontend/js/features/editor-left-menu/components/actions-manage-template.tsx create mode 100644 services/web/frontend/js/features/manage-template-modal/components/editor-manage-template-modal-wrapper.jsx create mode 100644 services/web/frontend/js/features/manage-template-modal/components/manage-template-modal-content.jsx create mode 100644 services/web/frontend/js/features/manage-template-modal/components/manage-template-modal.jsx create mode 100644 services/web/frontend/js/features/manage-template-modal/components/settings-template-category.tsx create mode 100644 services/web/frontend/js/features/template-gallery/components/gallery-header-all.tsx create mode 100644 services/web/frontend/js/features/template-gallery/components/gallery-header-tagged.tsx create mode 100644 services/web/frontend/js/features/template-gallery/components/gallery-popular-tags.tsx create mode 100644 services/web/frontend/js/features/template-gallery/components/gallery-search-sort-header.tsx create mode 100644 services/web/frontend/js/features/template-gallery/components/pagination.tsx create mode 100644 services/web/frontend/js/features/template-gallery/components/search-form.tsx create mode 100644 services/web/frontend/js/features/template-gallery/components/sort/with-content.tsx create mode 100644 services/web/frontend/js/features/template-gallery/components/template-gallery-entry.tsx create mode 100644 services/web/frontend/js/features/template-gallery/components/template-gallery-root.tsx create mode 100644 services/web/frontend/js/features/template-gallery/components/template-gallery.tsx create mode 100644 services/web/frontend/js/features/template-gallery/context/template-gallery-context.tsx create mode 100644 services/web/frontend/js/features/template-gallery/hooks/use-sort.ts create mode 100644 services/web/frontend/js/features/template-gallery/types/api.ts create mode 100644 services/web/frontend/js/features/template-gallery/util/api.ts create mode 100644 services/web/frontend/js/features/template-gallery/util/sort-templates.ts create mode 100644 services/web/frontend/js/features/template/components/delete-template-button.tsx create mode 100644 services/web/frontend/js/features/template/components/delete-template-modal.tsx create mode 100644 services/web/frontend/js/features/template/components/edit-template-button.tsx create mode 100644 services/web/frontend/js/features/template/components/edit-template-modal.tsx create mode 100644 services/web/frontend/js/features/template/components/settings/settings-language.tsx create mode 100644 services/web/frontend/js/features/template/components/settings/settings-menu-select.tsx create mode 100644 services/web/frontend/js/features/template/components/settings/settings-template-category.tsx create mode 100644 services/web/frontend/js/features/template/components/template-action-modal.tsx create mode 100644 services/web/frontend/js/features/template/components/template-details.tsx create mode 100644 services/web/frontend/js/features/template/components/template-preview.tsx create mode 100644 services/web/frontend/js/features/template/components/template-root.tsx create mode 100644 services/web/frontend/js/features/template/context/template-context.tsx create mode 100644 services/web/frontend/js/features/template/util/api.ts create mode 100644 services/web/frontend/js/pages/template-gallery.tsx create mode 100644 services/web/frontend/js/pages/template.tsx create mode 100644 services/web/modules/template-gallery/app/src/CleanHtml.mjs create mode 100644 services/web/modules/template-gallery/app/src/TemplateErrors.mjs create mode 100644 services/web/modules/template-gallery/app/src/TemplateGalleryController.mjs create mode 100644 services/web/modules/template-gallery/app/src/TemplateGalleryHelper.mjs create mode 100644 services/web/modules/template-gallery/app/src/TemplateGalleryManager.mjs create mode 100644 services/web/modules/template-gallery/app/src/TemplateGalleryRouter.mjs create mode 100644 services/web/modules/template-gallery/app/src/models/Template.js create mode 100644 services/web/modules/template-gallery/index.mjs create mode 100644 services/web/types/template.ts diff --git a/develop/docker-compose.yml b/develop/docker-compose.yml index 750e11ac87..990d840b63 100644 --- a/develop/docker-compose.yml +++ b/develop/docker-compose.yml @@ -123,14 +123,14 @@ services: dockerfile: services/real-time/Dockerfile env_file: - dev.env - + redis: image: redis:5 ports: - "127.0.0.1:6379:6379" # for debugging volumes: - redis-data:/data - + web: build: context: .. diff --git a/services/filestore/app.js b/services/filestore/app.js index 24741e079c..178e8c7ff0 100644 --- a/services/filestore/app.js +++ b/services/filestore/app.js @@ -111,6 +111,11 @@ if (settings.filestore.stores.template_files) { keyBuilder.templateFileKeyMiddleware, fileController.insertFile ) + app.delete( + '/template/:template_id/v/:version/:format', + keyBuilder.templateFileKeyMiddleware, + fileController.deleteFile + ) } app.get( diff --git a/services/filestore/app/js/FileConverter.js b/services/filestore/app/js/FileConverter.js index ac3dccec1f..bfc34314e9 100644 --- a/services/filestore/app/js/FileConverter.js +++ b/services/filestore/app/js/FileConverter.js @@ -5,7 +5,7 @@ const { callbackify } = require('node:util') const safeExec = require('./SafeExec').promises const { ConversionError } = require('./Errors') -const APPROVED_FORMATS = ['png'] +const APPROVED_FORMATS = ['png', 'jpg'] const FOURTY_SECONDS = 40 * 1000 const KILL_SIGNAL = 'SIGTERM' @@ -34,16 +34,14 @@ async function convert(sourcePath, requestedFormat) { } async function thumbnail(sourcePath) { - const width = '260x' - return await convert(sourcePath, 'png', [ + const width = '548x' + return await _convert(sourcePath, 'jpg', [ 'convert', '-flatten', '-background', 'white', '-density', '300', - '-define', - `pdf:fit-page=${width}`, `${sourcePath}[0]`, '-resize', width, @@ -51,16 +49,14 @@ async function thumbnail(sourcePath) { } async function preview(sourcePath) { - const width = '548x' - return await convert(sourcePath, 'png', [ + const width = '794x' + return await _convert(sourcePath, 'jpg', [ 'convert', '-flatten', '-background', 'white', '-density', '300', - '-define', - `pdf:fit-page=${width}`, `${sourcePath}[0]`, '-resize', width, diff --git a/services/filestore/app/js/FileHandler.js b/services/filestore/app/js/FileHandler.js index 2ed28bd435..0c092c85cd 100644 --- a/services/filestore/app/js/FileHandler.js +++ b/services/filestore/app/js/FileHandler.js @@ -150,7 +150,9 @@ async function _getConvertedFileAndCache(bucket, key, convertedKey, opts) { let convertedFsPath try { convertedFsPath = await _convertFile(bucket, key, opts) - await ImageOptimiser.promises.compressPng(convertedFsPath) + if (convertedFsPath.toLowerCase().endsWith(".png")) { + await ImageOptimiser.promises.compressPng(convertedFsPath) + } await PersistorManager.sendFile(bucket, convertedKey, convertedFsPath) } catch (err) { LocalFileWriter.deleteFile(convertedFsPath, () => {}) diff --git a/services/web/app/src/Features/Project/ProjectController.js b/services/web/app/src/Features/Project/ProjectController.js index ec128ffd54..5199329c98 100644 --- a/services/web/app/src/Features/Project/ProjectController.js +++ b/services/web/app/src/Features/Project/ProjectController.js @@ -598,11 +598,16 @@ const _ProjectController = { ) } +console.log("Features.hasFeature('templates-server-pro') = ", Features.hasFeature('templates-server-pro')) +console.log("Settings.templates?.nonAdminCanManage", Settings.templates?.nonAdminCanManage) + const isAdminOrTemplateOwner = - hasAdminAccess(user) || Settings.templates?.user_id === userId + hasAdminAccess(user) || Settings.templates?.nonAdminCanManage const showTemplatesServerPro = Features.hasFeature('templates-server-pro') && isAdminOrTemplateOwner +console.log("showTemplatesServerPro = ", showTemplatesServerPro ) + const debugPdfDetach = shouldDisplayFeature('debug_pdf_detach') const detachRole = req.params.detachRole diff --git a/services/web/app/src/Features/Templates/TemplatesController.js b/services/web/app/src/Features/Templates/TemplatesController.js index a8730a61be..b238527430 100644 --- a/services/web/app/src/Features/Templates/TemplatesController.js +++ b/services/web/app/src/Features/Templates/TemplatesController.js @@ -11,21 +11,22 @@ const TemplatesController = { // Read split test assignment so that it's available for Pug to read await SplitTestHandler.promises.getAssignment(req, res, 'core-pug-bs5') - const templateVersionId = req.params.Template_version_id - const templateId = req.query.id - if (!/^[0-9]+$/.test(templateVersionId) || !/^[0-9]+$/.test(templateId)) { - logger.err( - { templateVersionId, templateId }, - 'invalid template id or version' - ) - return res.sendStatus(400) - } + const templateId = req.params.Template_version_id + const templateVersionId = req.query.version +// if (!/^[0-9]+$/.test(templateVersionId) || !/^[0-9]+$/.test(templateId)) { +// logger.err( +// { templateVersionId, templateId }, +// 'invalid template id or version' +// ) +// return res.sendStatus(400) +// } const data = { templateVersionId, templateId, - name: req.query.templateName, - compiler: ProjectHelper.compilerFromV1Engine(req.query.latexEngine), - imageName: req.query.texImage, + name: req.query.name, + compiler: req.query.compiler, + language: req.query.language, + imageName: req.query.imageName, mainFile: req.query.mainFile, brandVariationId: req.query.brandVariationId, } @@ -40,6 +41,7 @@ const TemplatesController = { async createProjectFromV1Template(req, res) { const userId = SessionManager.getLoggedInUserId(req.session) + const project = await TemplatesManager.promises.createProjectFromV1Template( req.body.brandVariationId, req.body.compiler, @@ -48,7 +50,8 @@ const TemplatesController = { req.body.templateName, req.body.templateVersionId, userId, - req.body.imageName + req.body.imageName, + req.body.language ) delete req.session.templateData if (!project) { diff --git a/services/web/app/src/Features/Templates/TemplatesManager.js b/services/web/app/src/Features/Templates/TemplatesManager.js index 6a2b6207c1..c60aa11702 100644 --- a/services/web/app/src/Features/Templates/TemplatesManager.js +++ b/services/web/app/src/Features/Templates/TemplatesManager.js @@ -18,6 +18,7 @@ const crypto = require('crypto') const Errors = require('../Errors/Errors') const { pipeline } = require('stream/promises') const ClsiCacheManager = require('../Compile/ClsiCacheManager') +const TIMEOUT = 30000 // 30 sec const TemplatesManager = { async createProjectFromV1Template( @@ -28,25 +29,19 @@ const TemplatesManager = { templateName, templateVersionId, userId, - imageName + imageName, + language ) { - const zipUrl = `${settings.apis.v1.url}/api/v1/overleaf/templates/${templateVersionId}` + const zipUrl = `${settings.apis.filestore.url}/template/${templateId}/v/${templateVersionId}/zip` const zipReq = await fetchStreamWithResponse(zipUrl, { - basicAuth: { - user: settings.apis.v1.user, - password: settings.apis.v1.pass, - }, - signal: AbortSignal.timeout(settings.apis.v1.timeout), + signal: AbortSignal.timeout(TIMEOUT), }) const projectName = ProjectDetailsHandler.fixProjectName(templateName) const dumpPath = `${settings.path.dumpFolder}/${crypto.randomUUID()}` const writeStream = fs.createWriteStream(dumpPath) try { - const attributes = { - fromV1TemplateId: templateId, - fromV1TemplateVersionId: templateVersionId, - } + const attributes = {} await pipeline(zipReq.stream, writeStream) if (zipReq.response.status !== 200) { @@ -78,14 +73,9 @@ const TemplatesManager = { await TemplatesManager._setCompiler(project._id, compiler) await TemplatesManager._setImage(project._id, imageName) await TemplatesManager._setMainFile(project._id, mainFile) + await TemplatesManager._setSpellCheckLanguage(project._id, language) await TemplatesManager._setBrandVariationId(project._id, brandVariationId) - const update = { - fromV1TemplateId: templateId, - fromV1TemplateVersionId: templateVersionId, - } - await Project.updateOne({ _id: project._id }, update, {}) - await prepareClsiCacheInBackground return project @@ -102,11 +92,12 @@ const TemplatesManager = { }, async _setImage(projectId, imageName) { - if (!imageName) { - imageName = 'wl_texlive:2018.1' + try { + await ProjectOptionsHandler.setImageName(projectId, imageName) + } catch { + logger.warn({ imageName: imageName }, 'not available') + await ProjectOptionsHandler.setImageName(projectId, process.env.TEX_LIVE_DOCKER_IMAGE) } - - await ProjectOptionsHandler.setImageName(projectId, imageName) }, async _setMainFile(projectId, mainFile) { @@ -116,6 +107,13 @@ const TemplatesManager = { await ProjectRootDocManager.setRootDocFromName(projectId, mainFile) }, + async _setSpellCheckLanguage(projectId, language) { + if (language == null) { + return + } + await ProjectOptionsHandler.setSpellCheckLanguage(projectId, language) + }, + async _setBrandVariationId(projectId, brandVariationId) { if (brandVariationId == null) { return diff --git a/services/web/app/src/infrastructure/ExpressLocals.js b/services/web/app/src/infrastructure/ExpressLocals.js index eae1b48219..fcf8b6d3c5 100644 --- a/services/web/app/src/infrastructure/ExpressLocals.js +++ b/services/web/app/src/infrastructure/ExpressLocals.js @@ -428,7 +428,7 @@ module.exports = function (webRouter, privateApiRouter, publicApiRouter) { labsEnabled: Settings.labs && Settings.labs.enable, wikiEnabled: Settings.overleaf != null || Settings.proxyLearn, templatesEnabled: - Settings.overleaf != null || Settings.templates?.user_id != null, + Settings.overleaf != null || Boolean(Settings.moduleImportSequence.includes('template-gallery')), cioWriteKey: Settings.analytics?.cio?.writeKey, cioSiteId: Settings.analytics?.cio?.siteId, } diff --git a/services/web/app/src/infrastructure/Features.js b/services/web/app/src/infrastructure/Features.js index aaf51103b9..3153f2bccb 100644 --- a/services/web/app/src/infrastructure/Features.js +++ b/services/web/app/src/infrastructure/Features.js @@ -69,7 +69,7 @@ const Features = { case 'oauth': return Boolean(Settings.oauth) case 'templates-server-pro': - return Boolean(Settings.templates?.user_id) + return Boolean(Settings.moduleImportSequence.includes('template-gallery')) case 'affiliations': case 'analytics': return Boolean(_.get(Settings, ['apis', 'v1', 'url'])) diff --git a/services/web/app/src/router.mjs b/services/web/app/src/router.mjs index a7e8d5e05f..1f22a57f9f 100644 --- a/services/web/app/src/router.mjs +++ b/services/web/app/src/router.mjs @@ -262,6 +262,8 @@ async function initialize(webRouter, privateApiRouter, publicApiRouter) { '/read-only/one-time-login' ) + await Modules.applyRouter(webRouter, privateApiRouter, publicApiRouter) + webRouter.post('/logout', UserController.logout) webRouter.get('/restricted', AuthorizationMiddleware.restricted) @@ -285,8 +287,6 @@ async function initialize(webRouter, privateApiRouter, publicApiRouter) { TokenAccessRouter.apply(webRouter) HistoryRouter.apply(webRouter, privateApiRouter) - await Modules.applyRouter(webRouter, privateApiRouter, publicApiRouter) - if (Settings.enableSubscriptions) { webRouter.get( '/user/bonus', diff --git a/services/web/app/views/layout/navbar-marketing.pug b/services/web/app/views/layout/navbar-marketing.pug index c5e9f2e0bf..0cd1f1ede6 100644 --- a/services/web/app/views/layout/navbar-marketing.pug +++ b/services/web/app/views/layout/navbar-marketing.pug @@ -140,6 +140,17 @@ nav.navbar.navbar-default.navbar-main(class={ // logged out if !getSessionUser() + // templates link + li + a( + href="/templates" + event-tracking="menu-click" + event-tracking-action="clicked" + event-tracking-trigger="click" + event-tracking-mb="true" + event-segmentation={ page: currentUrl, item: 'templates', location: 'top-menu' } + ) #{translate('templates')} + // register link if hasFeature('registration-page') li.primary diff --git a/services/web/app/views/project/editor/new_from_template.pug b/services/web/app/views/project/editor/new_from_template.pug index f2945b20f1..fca70cac00 100644 --- a/services/web/app/views/project/editor/new_from_template.pug +++ b/services/web/app/views/project/editor/new_from_template.pug @@ -31,8 +31,10 @@ block content input(type="hidden" name="templateVersionId" value=templateVersionId) input(type="hidden" name="templateName" value=name) input(type="hidden" name="compiler" value=compiler) - input(type="hidden" name="imageName" value=imageName) + if imageName + input(type="hidden" name="imageName" value=imageName) input(type="hidden" name="mainFile" value=mainFile) + input(type="hidden" name="language" value=language) if brandVariationId input(type="hidden" name="brandVariationId" value=brandVariationId) input(hidden type="submit") diff --git a/services/web/app/views/template_gallery/template-gallery.pug b/services/web/app/views/template_gallery/template-gallery.pug new file mode 100644 index 0000000000..3838d30606 --- /dev/null +++ b/services/web/app/views/template_gallery/template-gallery.pug @@ -0,0 +1,18 @@ +extends ../layout-react + +block entrypointVar + - entrypoint = 'pages/template-gallery' + +block vars +block vars + - const suppressNavContentLinks = true + - const suppressNavbar = true + - const suppressFooter = true + - bootstrap5PageStatus = 'enabled' // One of 'disabled', 'enabled', and 'queryStringOnly' + - isWebsiteRedesign = false + +block append meta + meta(name="ol-templateCategory" data-type="string" content=category) + +block content + #template-gallery-root diff --git a/services/web/app/views/template_gallery/template.pug b/services/web/app/views/template_gallery/template.pug new file mode 100644 index 0000000000..e56fd8d2e5 --- /dev/null +++ b/services/web/app/views/template_gallery/template.pug @@ -0,0 +1,20 @@ +extends ../layout-react + +block entrypointVar + - entrypoint = 'pages/template' + +block vars + - const suppressNavContentLinks = true + - const suppressNavbar = true + - const suppressFooter = true + - bootstrap5PageStatus = 'enabled' // One of 'disabled', 'enabled', and 'queryStringOnly' + - isWebsiteRedesign = false + +block append meta + meta(name="ol-template" data-type="json" content=template) + meta(name="ol-languages" data-type="json" content=languages) + meta(name="ol-userIsAdmin" data-type="boolean" content=hasAdminAccess()) + +block content + #template-root + diff --git a/services/web/config/settings.defaults.js b/services/web/config/settings.defaults.js index a7ff970ef0..ee3423dcda 100644 --- a/services/web/config/settings.defaults.js +++ b/services/web/config/settings.defaults.js @@ -981,7 +981,7 @@ module.exports = { importProjectFromGithubModalWrapper: [], importProjectFromGithubMenu: [], editorLeftMenuSync: [], - editorLeftMenuManageTemplate: [], + editorLeftMenuManageTemplate: ['@/features/editor-left-menu/components/actions-manage-template'], oauth2Server: [], managedGroupSubscriptionEnrollmentNotification: [], managedGroupEnrollmentInvite: [], @@ -1005,6 +1005,7 @@ module.exports = { 'launchpad', 'server-ce-scripts', 'user-activate', + 'template-gallery', ], viewIncludes: {}, diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index 9862e47817..14fc501233 100644 --- a/services/web/frontend/extracted-translations.json +++ b/services/web/frontend/extracted-translations.json @@ -23,6 +23,7 @@ "about_to_delete_cert": "", "about_to_delete_projects": "", "about_to_delete_tag": "", + "about_to_delete_template": "", "about_to_delete_the_following_project": "", "about_to_delete_the_following_projects": "", "about_to_delete_user_preamble": "", @@ -124,6 +125,7 @@ "all_premium_features_including": "", "all_projects": "", "all_projects_will_be_transferred_immediately": "", + "all_templates": "", "all_these_experiments_are_available_exclusively": "", "allows_to_search_by_author_title_etc_possible_to_pull_results_directly_from_your_reference_manager_if_connected": "", "already_have_a_papers_account": "", @@ -154,6 +156,7 @@ "ask_repo_owner_to_reconnect": "", "ask_repo_owner_to_renew_overleaf_subscription": "", "at_most_x_libraries_can_be_selected": "", + "author": "", "auto_close_brackets": "", "auto_compile": "", "auto_complete": "", @@ -215,6 +218,7 @@ "card_must_be_authenticated_by_3dsecure": "", "card_payment": "", "careers": "", + "categories": "", "category_arrows": "", "category_greek": "", "category_misc": "", @@ -352,6 +356,7 @@ "customize_your_group_subscription": "", "customizing_figures": "", "customizing_tables": "", + "date": "", "date_and_owner": "", "dealing_with_errors": "", "decrease_indent": "", @@ -377,6 +382,7 @@ "delete_sso_config": "", "delete_table": "", "delete_tag": "", + "delete_template": "", "delete_token": "", "delete_user": "", "delete_your_account": "", @@ -476,6 +482,7 @@ "edit_figure": "", "edit_sso_configuration": "", "edit_tag": "", + "edit_template": "", "edit_your_custom_dictionary": "", "editing": "", "editing_captions": "", @@ -890,6 +897,7 @@ "last_name": "", "last_resort_trouble_shooting_guide": "", "last_suggested_fix": "", + "last_updated": "", "last_updated_date_by_x": "", "last_used": "", "latam_discount_modal_info": "", @@ -898,6 +906,8 @@ "latex_in_thirty_minutes": "", "latex_places_figures_according_to_a_special_algorithm": "", "latex_places_tables_according_to_a_special_algorithm": "", + "latex_templates": "", + "latex_templates_for_journal_articles": "", "layout": "", "layout_options": "", "layout_processing": "", @@ -921,7 +931,8 @@ "let_us_know_what_you_think": "", "lets_get_those_premium_features": "", "library": "", - "licenses": "", + "license": "", + "license_for_educational_purposes_confirmation": "", "limited_document_history": "", "limited_offer": "", "limited_to_n_collaborators_per_project": "", @@ -1105,6 +1116,7 @@ "no_selection_select_file": "", "no_symbols_found": "", "no_thanks_cancel_now": "", + "no_templates_found": "", "normal": "", "normally_x_price_per_month": "", "normally_x_price_per_year": "", @@ -1135,6 +1147,7 @@ "only_importer_can_refresh": "", "open_action_menu": "", "open_advanced_reference_search": "", + "open_as_template": "", "open_file": "", "open_link": "", "open_path": "", @@ -1160,6 +1173,7 @@ "overleaf_is_easy_to_use": "", "overleaf_labs": "", "overleaf_logo": "", + "overleaf_template_gallery": "", "overleafs_functionality_meets_my_needs": "", "overview": "", "overwrite": "", @@ -1222,6 +1236,7 @@ "please_change_primary_to_remove": "", "please_check_your_inbox_to_confirm": "", "please_compile_pdf_before_download": "", + "please_compile_pdf_before_publish_as_template": "", "please_compile_pdf_before_word_count": "", "please_confirm_primary_email_or_edit": "", "please_confirm_secondary_email_or_edit": "", @@ -1256,6 +1271,7 @@ "premium_plan_label": "", "presentation_mode": "", "press_and_awards": "", + "prev": "", "previous_page": "", "price": "", "primarily_work_study_question": "", @@ -1708,7 +1724,10 @@ "take_survey": "", "tell_the_project_owner_and_ask_them_to_upgrade": "", "template": "", + "template_category": "", "template_description": "", + "template_gallery": "", + "template_title": "", "template_title_taken_from_project_title": "", "templates": "", "temporarily_hides_the_preview": "", diff --git a/services/web/frontend/js/features/editor-left-menu/components/actions-manage-template.tsx b/services/web/frontend/js/features/editor-left-menu/components/actions-manage-template.tsx new file mode 100644 index 0000000000..30d1e81eea --- /dev/null +++ b/services/web/frontend/js/features/editor-left-menu/components/actions-manage-template.tsx @@ -0,0 +1,72 @@ +import { useCallback, useState } from 'react' +import { useTranslation } from 'react-i18next' +import * as eventTracking from '../../../infrastructure/event-tracking' +import getMeta from '../../../utils/meta' +import OLTooltip from '@/features/ui/components/ol/ol-tooltip' +import { useDetachCompileContext } from '../../../shared/context/detach-compile-context' +import EditorManageTemplateModalWrapper from '../../manage-template-modal/components/editor-manage-template-modal-wrapper' +import LeftMenuButton from './left-menu-button' + +type TemplateManageResponse = { + template_id: string +} + +export default function ActionsManageTemplate() { + + const templatesAdmin = getMeta('ol-showTemplatesServerPro') + if (!templatesAdmin) { + return null + } + + const [showModal, setShowModal] = useState(false) + const { pdfFile } = useDetachCompileContext() + const { t } = useTranslation() + + const handleShowModal = useCallback(() => { + eventTracking.sendMB('left-menu-template') + setShowModal(true) + }, []) + + const openTemplate = useCallback( + ({ template_id: templateId }: TemplateManageResponse) => { + location.assign(`/template/${templateId}`) + }, + [location] + ) + + return ( + <> + {pdfFile ? ( + + {t('publish_as_template')} + + ) : ( + + {/* OverlayTrigger won't fire unless the child is a non-react html element (e.g div, span) */} +
+ + {t('publish_as_template')} + +
+ + )} + setShowModal(false)} + openTemplate={openTemplate} + /> + + ) +} diff --git a/services/web/frontend/js/features/manage-template-modal/components/editor-manage-template-modal-wrapper.jsx b/services/web/frontend/js/features/manage-template-modal/components/editor-manage-template-modal-wrapper.jsx new file mode 100644 index 0000000000..e24cae0821 --- /dev/null +++ b/services/web/frontend/js/features/manage-template-modal/components/editor-manage-template-modal-wrapper.jsx @@ -0,0 +1,37 @@ +import React from 'react' +import PropTypes from 'prop-types' +import withErrorBoundary from '../../../infrastructure/error-boundary' +import { useProjectContext } from '../../../shared/context/project-context' +import ManageTemplateModal from './manage-template-modal' + +const EditorManageTemplateModalWrapper = React.memo( + function EditorManageTemplateModalWrapper({ show, handleHide, openTemplate }) { + const { + _id: projectId, + name: projectName, + } = useProjectContext() + + if (!projectName) { + // wait for useProjectContext + return null + } else { + return ( + + ) + } + } +) + +EditorManageTemplateModalWrapper.propTypes = { + show: PropTypes.bool.isRequired, + handleHide: PropTypes.func.isRequired, + openTemplate: PropTypes.func.isRequired, +} + +export default withErrorBoundary(EditorManageTemplateModalWrapper) diff --git a/services/web/frontend/js/features/manage-template-modal/components/manage-template-modal-content.jsx b/services/web/frontend/js/features/manage-template-modal/components/manage-template-modal-content.jsx new file mode 100644 index 0000000000..54b3da3523 --- /dev/null +++ b/services/web/frontend/js/features/manage-template-modal/components/manage-template-modal-content.jsx @@ -0,0 +1,203 @@ +import { useMemo, useEffect, useState } from 'react' +import { useTranslation } from 'react-i18next' +import PropTypes from 'prop-types' +import { debugConsole } from '@/utils/debugging' +import { getJSON, postJSON } from '../../../infrastructure/fetch-json' +import Notification from '@/shared/components/notification' +import { + OLModalBody, + OLModalFooter, + OLModalHeader, + OLModalTitle, +} from '@/features/ui/components/ol/ol-modal' +import OLForm from '@/features/ui/components/ol/ol-form' +import OLFormGroup from '@/features/ui/components/ol/ol-form-group' +import OLFormControl from '@/features/ui/components/ol/ol-form-control' +import OLFormLabel from '@/features/ui/components/ol/ol-form-label' +import OLButton from '@/features/ui/components/ol/ol-button' +import { useDetachCompileContext } from '../../../shared/context/detach-compile-context' +import { useUserContext } from '../../../shared/context/user-context' +import SettingsTemplateCategory from './settings-template-category' + +const defaultLicense = 'Creative Commons CC BY 4.0' + +export default function ManageTemplateModalContent({ + handleHide, + inFlight, + setInFlight, + handleAfterPublished, + projectId, + projectName, +}) { + const { t } = useTranslation() + + const { pdfFile } = useDetachCompileContext() + const user = useUserContext() + + const [error, setError] = useState() + const [disablePublish, setDisablePublish] = useState(false) + const [notificationType, setNotificationType] = useState('error') + const [name, setName] = useState(`${projectName}`) + const [description, setDescription] = useState('') + const [author, setAuthor] = useState(`${user.first_name} ${user.last_name}`.trim()) + const [license, setLicense] = useState(defaultLicense) + const [category, setCategory] = useState() + const [override, setOverride] = useState(false) + const [titleConflict, setTitleConflict] = useState(false) + + const valid = useMemo( + () => name.trim().length > 0 && license.trim().length, + [name, license] + ) + + useEffect(() => { + const queryParams = new URLSearchParams({ key: 'name', val: projectName }) + getJSON(`/api/template?${queryParams}`) + .then((data) => { + if (!data) return + setDescription(data.descriptionMD) + setAuthor(data.authorMD) + setLicense(data.license) + setCategory(data.category) + }) + .catch(debugConsole.error) + }, []) + + const handleSubmit = event => { + event.preventDefault() + + if (!valid) { + return + } + + setError(false) + setInFlight(true) + + postJSON(`/template/new/${projectId}`, { + body: { + category, + name: name.trim(), + authorMD: author.trim(), + license: license.trim(), + descriptionMD: description.trim(), + build: pdfFile.build, + override, + }, + }) + .then(data => { + // redirect to template page + handleHide() + handleAfterPublished(data) + }) + .catch(({ response, data }) => { + if (response?.status === 409 && data.canOverride) { + setNotificationType('warning') + setOverride(true) + } else { + setNotificationType('error') + setDisablePublish(true) + } + setError(data.message) + if (response?.status === 409) setTitleConflict(true) + }) + .finally(() => { + setInFlight(false) + }) + } + + const handleNameChange = event => { + setName(event.target.value) + if (titleConflict) { + setError(false) + setOverride(false) + if (disablePublish) setDisablePublish(false) + } + } + + return ( + <> + + {t('publish_as_template')} + + + + + + {t('template_title')} + + + + + + + {t('Author')} + setAuthor(event.target.value)} + /> + + + {t('License')} + setLicense(event.target.value)} + /> + + + {t('template_description')} + setDescription(event.target.value)} + rows={4} + autoFocus + /> + + + {error && ( + + )} + + + + + {t('cancel')} + + + {inFlight ? <>{t('publishing')}… : override ? t('overwrite') : t('publish')} + + + + ) +} + +ManageTemplateModalContent.propTypes = { + handleHide: PropTypes.func.isRequired, + inFlight: PropTypes.bool, + handleAfterPublished: PropTypes.func.isRequired, + setInFlight: PropTypes.func.isRequired, + projectId: PropTypes.string, + projectName: PropTypes.string, +} diff --git a/services/web/frontend/js/features/manage-template-modal/components/manage-template-modal.jsx b/services/web/frontend/js/features/manage-template-modal/components/manage-template-modal.jsx new file mode 100644 index 0000000000..2e8096961d --- /dev/null +++ b/services/web/frontend/js/features/manage-template-modal/components/manage-template-modal.jsx @@ -0,0 +1,51 @@ +import React, { memo, useCallback, useState } from 'react' +import PropTypes from 'prop-types' +import OLModal from '@/features/ui/components/ol/ol-modal' +import ManageTemplateModalContent from './manage-template-modal-content' + +function ManageTemplateModal({ + show, + handleHide, + handleAfterPublished, + projectId, + projectName, +}) { + const [inFlight, setInFlight] = useState(false) + + const onHide = useCallback(() => { + if (!inFlight) { + handleHide() + } + }, [handleHide, inFlight]) + + return ( + + + + ) +} + +ManageTemplateModal.propTypes = { + show: PropTypes.bool.isRequired, + handleHide: PropTypes.func.isRequired, + handleAfterPublished: PropTypes.func.isRequired, + projectId: PropTypes.string, + projectName: PropTypes.string, +} + +export default memo(ManageTemplateModal) diff --git a/services/web/frontend/js/features/manage-template-modal/components/settings-template-category.tsx b/services/web/frontend/js/features/manage-template-modal/components/settings-template-category.tsx new file mode 100644 index 0000000000..747fbe73cf --- /dev/null +++ b/services/web/frontend/js/features/manage-template-modal/components/settings-template-category.tsx @@ -0,0 +1,51 @@ +import { useMemo, useEffect } from 'react' +import { useTranslation } from 'react-i18next' +import getMeta from '../../../utils/meta' +import SettingsMenuSelect from '@/features/editor-left-menu/components/settings/settings-menu-select' +import type { Option } from '@/features/editor-left-menu/components/settings/settings-menu-select' + +interface ManageTemplateCategoryProps { + category: string | null + setCategory: (value: string) => void +} + +export default function SettingsTemplateCategory({ + category, + setCategory +}: ManageTemplateCategoryProps) { + const { t } = useTranslation() + + const { templateLinks } = useMemo( + () => getMeta('ol-ExposedSettings') || [], + [] + ) + + if (templateLinks.length === 0) { + return null + } + + const options: Option[] = useMemo( + () => + templateLinks.map(({ name, url }) => ({ + value: url, + label: name, + })), + [templateLinks] + ) + + useEffect(() => { + if (!category && options.length > 0) { + setCategory(options[0].value) + } + }, [options, category, setCategory]) + + return ( + + ) +} diff --git a/services/web/frontend/js/features/template-gallery/components/gallery-header-all.tsx b/services/web/frontend/js/features/template-gallery/components/gallery-header-all.tsx new file mode 100644 index 0000000000..aed7c311f9 --- /dev/null +++ b/services/web/frontend/js/features/template-gallery/components/gallery-header-all.tsx @@ -0,0 +1,29 @@ +import { useTranslation } from 'react-i18next' +import OLCol from '@/features/ui/components/ol/ol-col' +import OLRow from '@/features/ui/components/ol/ol-row' + +export default function GalleryHeaderAll() { + const { t } = useTranslation() + return ( +
+ + +

+ + + {t('overleaf_template_gallery')} + + + {t('latex_templates')} +

+ + +
+
+

{t('latex_templates_for_journal_articles')} +

+
+
+
+ ) +} diff --git a/services/web/frontend/js/features/template-gallery/components/gallery-header-tagged.tsx b/services/web/frontend/js/features/template-gallery/components/gallery-header-tagged.tsx new file mode 100644 index 0000000000..ca2f37dbb5 --- /dev/null +++ b/services/web/frontend/js/features/template-gallery/components/gallery-header-tagged.tsx @@ -0,0 +1,33 @@ +import getMeta from '@/utils/meta' +import OLCol from '@/features/ui/components/ol/ol-col' +import OLRow from '@/features/ui/components/ol/ol-row' +import GallerySearchSortHeader from './gallery-search-sort-header' + +export default function GalleryHeaderTagged({ category }) { + const title = getMeta('og:title') + const { templateLinks } = getMeta('ol-ExposedSettings') || [] + + const description = templateLinks?.find(link => link.url.split("/").pop() === category)?.description + const gotoAllLink = (category !== 'all') + return ( +
+ + { category && ( + <> + + +

{title}

+ + + + +

{description}

+ + + + )} +
+ ) +} diff --git a/services/web/frontend/js/features/template-gallery/components/gallery-popular-tags.tsx b/services/web/frontend/js/features/template-gallery/components/gallery-popular-tags.tsx new file mode 100644 index 0000000000..9ab098ddab --- /dev/null +++ b/services/web/frontend/js/features/template-gallery/components/gallery-popular-tags.tsx @@ -0,0 +1,29 @@ +import { useTranslation } from 'react-i18next' +import getMeta from '@/utils/meta' + +export default function GalleryPopularTags() { + const { t } = useTranslation() + const { templateLinks } = getMeta('ol-ExposedSettings') || [] + + return ( +
+

{t('categories')}

+
+ {templateLinks?.filter(link => link.url.split("/").pop() !== "all").map((link, index) => ( +
+ +
+ {link.name} +
+ {link.name} + +

{link.description}

+
+ ))} +
+
+ ) +} diff --git a/services/web/frontend/js/features/template-gallery/components/gallery-search-sort-header.tsx b/services/web/frontend/js/features/template-gallery/components/gallery-search-sort-header.tsx new file mode 100644 index 0000000000..8fe9438a82 --- /dev/null +++ b/services/web/frontend/js/features/template-gallery/components/gallery-search-sort-header.tsx @@ -0,0 +1,78 @@ +import { useTemplateGalleryContext } from '../context/template-gallery-context' +import { useTranslation } from 'react-i18next' +import SearchForm from './search-form' +import OLCol from '@/features/ui/components/ol/ol-col' +import OLRow from '@/features/ui/components/ol/ol-row' +import useSort from '../hooks/use-sort' +import withContent, { SortBtnProps } from './sort/with-content' +import MaterialIcon from '@/shared/components/material-icon' + +function SortBtn({ onClick, text, iconType, screenReaderText }: SortBtnProps) { + return ( + + ) +} + +const SortByButton = withContent(SortBtn) + +export default function GallerySearchSortHeader( { gotoAllLink }: { boolean } ) { + const { t } = useTranslation() + const { + searchText, + setSearchText, + sort, + } = useTemplateGalleryContext() + + const { handleSort } = useSort() + return ( + + {gotoAllLink ? ( + + + + {t('all_templates')} + + + ) : ( + + + + {t('template_gallery')} + + + )} + + handleSort('lastUpdated')} + /> + + handleSort('name')} + /> + + + + + + ) +} diff --git a/services/web/frontend/js/features/template-gallery/components/pagination.tsx b/services/web/frontend/js/features/template-gallery/components/pagination.tsx new file mode 100644 index 0000000000..a55f96a6a4 --- /dev/null +++ b/services/web/frontend/js/features/template-gallery/components/pagination.tsx @@ -0,0 +1,80 @@ +import { useTranslation } from 'react-i18next' + +export default function Pagination({ currentPage, totalPages, onPageChange }) { + const { t } = useTranslation() + if (totalPages <= 1) return null + + const pageNumbers = [] + let startPage = Math.max(1, currentPage - 4) + let endPage = Math.min(totalPages, currentPage + 4) + + if (startPage > 1) { + pageNumbers.push(1) + if (startPage > 2) { + pageNumbers.push("...") + } + } + + for (let i = startPage; i <= endPage; i++) { + pageNumbers.push(i) + } + + if (endPage < totalPages) { + if (endPage < totalPages - 1) { + pageNumbers.push("...") + } + pageNumbers.push(totalPages) + } + + return ( + + ) +} diff --git a/services/web/frontend/js/features/template-gallery/components/search-form.tsx b/services/web/frontend/js/features/template-gallery/components/search-form.tsx new file mode 100644 index 0000000000..cb05a91e95 --- /dev/null +++ b/services/web/frontend/js/features/template-gallery/components/search-form.tsx @@ -0,0 +1,59 @@ +import { useTranslation } from 'react-i18next' +import { MergeAndOverride } from '../../../../../types/utils' +import OLForm from '@/features/ui/components/ol/ol-form' +import OLFormControl from '@/features/ui/components/ol/ol-form-control' +import MaterialIcon from '@/shared/components/material-icon' + +type SearchFormOwnProps = { + inputValue: string + setInputValue: (input: string) => void +} + +type SearchFormProps = MergeAndOverride< + React.ComponentProps, + SearchFormOwnProps +> + +export default function SearchForm({ + inputValue, + setInputValue, +}: SearchFormProps) { + const { t } = useTranslation() + let placeholderMessage = t('search') + const placeholder = `${placeholderMessage}…` + + const handleChange: React.ComponentProps['onChange'] = e => { + setInputValue(e.target.value) + } + + const handleClear = () => setInputValue('') + + return ( + e.preventDefault()} + > + } + append={ + inputValue.length > 0 && ( + + ) + } + /> + + ) +} diff --git a/services/web/frontend/js/features/template-gallery/components/sort/with-content.tsx b/services/web/frontend/js/features/template-gallery/components/sort/with-content.tsx new file mode 100644 index 0000000000..8c77484fdf --- /dev/null +++ b/services/web/frontend/js/features/template-gallery/components/sort/with-content.tsx @@ -0,0 +1,46 @@ +import { useTranslation } from 'react-i18next' +import { Sort } from '../../types/api' + +type SortBtnOwnProps = { + column: string + sort: Sort + text: string + onClick: () => void +} + +type WithContentProps = { + iconType?: string + screenReaderText: string +} + +export type SortBtnProps = SortBtnOwnProps & WithContentProps + +function withContent( + WrappedComponent: React.ComponentType +) { + function WithContent(hocProps: T) { + const { t } = useTranslation() + const { column, text, sort } = hocProps + let iconType + + let screenReaderText = t('sort_by_x', { x: text }) + + if (column === sort.by) { + iconType = + sort.order === 'asc' ? 'arrow_upward_alt' : 'arrow_downward_alt' + screenReaderText = t('reverse_x_sort_order', { x: text }) + } + + return ( + + ) + } + + return WithContent +} + +export default withContent diff --git a/services/web/frontend/js/features/template-gallery/components/template-gallery-entry.tsx b/services/web/frontend/js/features/template-gallery/components/template-gallery-entry.tsx new file mode 100644 index 0000000000..479b306b51 --- /dev/null +++ b/services/web/frontend/js/features/template-gallery/components/template-gallery-entry.tsx @@ -0,0 +1,29 @@ +import { memo } from 'react' +import { cleanHtml } from '../../../../../modules/template-gallery/app/src/CleanHtml.mjs' + +function TemplateGalleryEntry({ template }) { + return ( +
+ +
+ {template.name} +
+ + {template.name} + + + +
+

+

+
+
+
+
+ ) +} + +export default memo(TemplateGalleryEntry) diff --git a/services/web/frontend/js/features/template-gallery/components/template-gallery-root.tsx b/services/web/frontend/js/features/template-gallery/components/template-gallery-root.tsx new file mode 100644 index 0000000000..d17250f33a --- /dev/null +++ b/services/web/frontend/js/features/template-gallery/components/template-gallery-root.tsx @@ -0,0 +1,64 @@ +import { TemplateGalleryProvider } from '../context/template-gallery-context' +import { useTranslation } from 'react-i18next' +import useWaitForI18n from '../../../shared/hooks/use-wait-for-i18n' +import withErrorBoundary from '../../../infrastructure/error-boundary' +import { GenericErrorBoundaryFallback } from '@/shared/components/generic-error-boundary-fallback' +import getMeta from '@/utils/meta' +import DefaultNavbar from '@/features/ui/components/bootstrap-5/navbar/default-navbar' +import Footer from '@/features/ui/components/bootstrap-5/footer/footer' +import GalleryHeaderTagged from './gallery-header-tagged' +import GalleryHeaderAll from './gallery-header-all' +import TemplateGallery from './template-gallery' +import GallerySearchSortHeader from './gallery-search-sort-header' +import GalleryPopularTags from './gallery-popular-tags' + +function TemplateGalleryRoot() { + const { isReady } = useWaitForI18n() + if (!isReady) { + return null + } + return ( + + + + ) +} + +function TemplateGalleryPageContent() { + const { t } = useTranslation() + const navbarProps = getMeta('ol-navbar') + const footerProps = getMeta('ol-footer') + const category = getMeta('ol-templateCategory') + + return ( + <> + +
+
+ {category ? ( + <> + + + + ) : ( + <> + + +
+
+ +

{t('all_templates')}

+ +
+ + )} +
+
+