diff --git a/develop/docker-compose.yml b/develop/docker-compose.yml index 3c8c078719..96d0bf9b2d 100644 --- a/develop/docker-compose.yml +++ b/develop/docker-compose.yml @@ -131,7 +131,7 @@ services: dockerfile: services/real-time/Dockerfile env_file: - dev.env - + redis: image: redis:7 ports: diff --git a/services/filestore/app.js b/services/filestore/app.js index 9d138c8111..bdcd2930c4 100644 --- a/services/filestore/app.js +++ b/services/filestore/app.js @@ -66,6 +66,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 cdde44b1e7..6030d378c5 100644 --- a/services/filestore/app/js/FileConverter.js +++ b/services/filestore/app/js/FileConverter.js @@ -6,7 +6,7 @@ import Errors from './Errors.js' const { ConversionError } = Errors -const APPROVED_FORMATS = ['png'] +const APPROVED_FORMATS = ['png', 'jpg'] const FOURTY_SECONDS = 40 * 1000 const KILL_SIGNAL = 'SIGTERM' diff --git a/services/filestore/app/js/FileHandler.js b/services/filestore/app/js/FileHandler.js index 5e70afb3ad..44c8f03caf 100644 --- a/services/filestore/app/js/FileHandler.js +++ b/services/filestore/app/js/FileHandler.js @@ -111,7 +111,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.mjs b/services/web/app/src/Features/Project/ProjectController.mjs index 85d3befde1..ec99f6f678 100644 --- a/services/web/app/src/Features/Project/ProjectController.mjs +++ b/services/web/app/src/Features/Project/ProjectController.mjs @@ -752,11 +752,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.mjs b/services/web/app/src/Features/Templates/TemplatesController.mjs index 85fb1fb4b3..2c504cd132 100644 --- a/services/web/app/src/Features/Templates/TemplatesController.mjs +++ b/services/web/app/src/Features/Templates/TemplatesController.mjs @@ -7,21 +7,22 @@ import { expressify } from '@overleaf/promise-utils' const TemplatesController = { async getV1Template(req, res) { - 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, } @@ -36,6 +37,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, @@ -44,7 +46,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.mjs b/services/web/app/src/Features/Templates/TemplatesManager.mjs index 8ec52d4b1d..c7a07a3018 100644 --- a/services/web/app/src/Features/Templates/TemplatesManager.mjs +++ b/services/web/app/src/Features/Templates/TemplatesManager.mjs @@ -20,6 +20,7 @@ import OError from '@overleaf/o-error' const { promises: ProjectRootDocManager } = ProjectRootDocManagerModule const { promises: ProjectOptionsHandler } = ProjectOptionsHandlerModule +const TIMEOUT = 30000 // 30 sec const TemplatesManager = { async createProjectFromV1Template( @@ -30,34 +31,19 @@ const TemplatesManager = { templateName, templateVersionId, userId, - imageName + imageName, + language ) { - compiler = ProjectOptionsHandler.normalizeCompiler(compiler || 'pdflatex') - imageName = ProjectOptionsHandler.normalizeImageName( - imageName || 'wl_texlive:2018.1' - ) - - 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()}_templates-manager` const writeStream = fs.createWriteStream(dumpPath) try { - const attributes = { - fromV1TemplateId: templateId, - fromV1TemplateVersionId: templateVersionId, - compiler, - imageName, - } - if (brandVariationId) attributes.brandVariationId = brandVariationId - + const attributes = {} await pipeline(zipReq.stream, writeStream) if (zipReq.response.status !== 200) { @@ -87,22 +73,13 @@ const TemplatesManager = { return undefined }) - await TemplatesManager._setMainFile(project, mainFile) + 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 found = await prepareClsiCacheInBackground - if (found === false && project.rootDoc_id) { - ClsiCacheManager.createTemplateClsiCache({ - templateVersionId, - project, - fileEntries, - docEntries, - }).catch(err => { - logger.error( - { err, templateVersionId }, - 'failed to create template clsi-cache' - ) - }) - } + await prepareClsiCacheInBackground return project } finally { @@ -110,15 +87,41 @@ const TemplatesManager = { } }, - async _setMainFile(project, mainFile) { + async _setCompiler(projectId, compiler) { + if (compiler == null) { + return + } + await ProjectOptionsHandler.setCompiler(projectId, compiler) + }, + + async _setImage(projectId, imageName) { + try { + await ProjectOptionsHandler.setImageName(projectId, imageName) + } catch { + logger.warn({ imageName: imageName }, 'not available') + await ProjectOptionsHandler.setImageName(projectId, process.env.TEX_LIVE_DOCKER_IMAGE) + } + }, + + async _setMainFile(projectId, mainFile) { if (mainFile == null) { return } - const rootDocId = await ProjectRootDocManager.setRootDocFromName( - project._id, - mainFile - ) - if (rootDocId) project.rootDoc_id = rootDocId + 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 + } + await ProjectOptionsHandler.setBrandVariationId(projectId, brandVariationId) }, async fetchFromV1(templateId) { diff --git a/services/web/app/src/infrastructure/ExpressLocals.mjs b/services/web/app/src/infrastructure/ExpressLocals.mjs index 661f1594e8..c9dddc8ec0 100644 --- a/services/web/app/src/infrastructure/ExpressLocals.mjs +++ b/services/web/app/src/infrastructure/ExpressLocals.mjs @@ -413,7 +413,7 @@ export default async 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, linkedInInsightsPartnerId: Settings.analytics?.linkedIn?.partnerId, diff --git a/services/web/app/src/infrastructure/Features.mjs b/services/web/app/src/infrastructure/Features.mjs index 229312f38c..193cc3c658 100644 --- a/services/web/app/src/infrastructure/Features.mjs +++ b/services/web/app/src/infrastructure/Features.mjs @@ -68,7 +68,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 91b87e8e1c..e4aa8b9d79 100644 --- a/services/web/app/src/router.mjs +++ b/services/web/app/src/router.mjs @@ -283,6 +283,8 @@ async function initialize(webRouter, privateApiRouter, publicApiRouter) { '/read-only/one-time-login' ) + await Modules.applyRouter(webRouter, privateApiRouter, publicApiRouter) + webRouter.get('/logout', UserPagesController.logout) webRouter.post('/logout', UserController.logout) diff --git a/services/web/app/views/layout/navbar-marketing.pug b/services/web/app/views/layout/navbar-marketing.pug index 3f532047ef..fd5d90ec52 100644 --- a/services/web/app/views/layout/navbar-marketing.pug +++ b/services/web/app/views/layout/navbar-marketing.pug @@ -151,6 +151,17 @@ nav.navbar.navbar-default.navbar-main.navbar-expand-lg( // 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') +nav-item.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 a5dc3ff33c..6d35913141 100644 --- a/services/web/app/views/project/editor/new_from_template.pug +++ b/services/web/app/views/project/editor/new_from_template.pug @@ -29,8 +29,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 329f8191ed..8407650714 100644 --- a/services/web/config/settings.defaults.js +++ b/services/web/config/settings.defaults.js @@ -1031,7 +1031,7 @@ module.exports = { importProjectFromGithubModalWrapper: [], importProjectFromGithubMenu: [], editorLeftMenuSync: [], - editorLeftMenuManageTemplate: [], + editorLeftMenuManageTemplate: ['@/features/editor-left-menu/components/actions-manage-template'], menubarExtraComponents: [], oauth2Server: [], managedGroupSubscriptionEnrollmentNotification: [], @@ -1089,6 +1089,7 @@ module.exports = { 'authentication/ldap', 'authentication/saml', 'authentication/oidc', + 'template-gallery', ], viewIncludes: {}, diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index ef6ddedc34..2b11523a91 100644 --- a/services/web/frontend/extracted-translations.json +++ b/services/web/frontend/extracted-translations.json @@ -25,6 +25,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": "", @@ -142,6 +143,7 @@ "all_project_activity_description": "", "all_projects": "", "all_projects_will_be_transferred_immediately": "", + "all_templates": "", "all_these_experiments_are_available_exclusively": "", "allocate_license": "", "allows_to_search_by_author_title_etc_possible_to_pull_results_directly_from_your_reference_manager_if_connected": "", @@ -180,6 +182,7 @@ "at_most_x_libraries_can_be_selected": "", "attach_image_or_pdf": "", "audit_logs": "", + "author": "", "auto_close_brackets": "", "auto_compile": "", "auto_complete": "", @@ -265,6 +268,7 @@ "card_must_be_authenticated_by_3dsecure": "", "card_payment": "", "careers": "", + "categories": "", "category_arrows": "", "category_greek": "", "category_misc": "", @@ -425,6 +429,7 @@ "cut": "", "dark_mode_pdf_preview": "", "dark_themes": "", + "date": "", "date_and_owner": "", "date_and_time": "", "dealing_with_errors": "", @@ -454,6 +459,7 @@ "delete_sso_config": "", "delete_table": "", "delete_tag": "", + "delete_template": "", "delete_token": "", "delete_user": "", "delete_your_account": "", @@ -568,6 +574,7 @@ "edit_sso_configuration": "", "edit_tag": "", "edit_tag_name": "", + "edit_template": "", "edit_your_custom_dictionary": "", "edited": "", "editing": "", @@ -1042,6 +1049,7 @@ "last_name": "", "last_resort_trouble_shooting_guide": "", "last_suggested_fix": "", + "last_updated": "", "last_updated_date_by_x": "", "last_used": "", "last_verification_attempt": "", @@ -1050,6 +1058,8 @@ "latam_discount_modal_title": "", "latex_places_figures_according_to_a_special_algorithm": "", "latex_places_tables_according_to_a_special_algorithm": "", + "latex_templates": "", + "latex_templates_for_journal_articles": "", "layout_options": "", "learn_more": "", "learn_more_about": "", @@ -1277,6 +1287,7 @@ "no_search_results": "", "no_selection_select_file": "", "no_symbols_found": "", + "no_templates_found": "", "no_thanks_cancel_now": "", "non_blinking_cursor": "", "normal": "", @@ -1315,6 +1326,7 @@ "only_project_owner_can_link_github": "", "open_action_menu": "", "open_advanced_reference_search": "", + "open_as_template": "", "open_file": "", "open_link": "", "open_path": "", @@ -1341,6 +1353,7 @@ "overleaf_labs": "", "overleaf_learning_center": "", "overleaf_logo": "", + "overleaf_template_gallery": "", "overleafs_functionality_meets_my_needs": "", "overview": "", "overwrite": "", @@ -1415,6 +1428,7 @@ "please_ask_the_project_owner_to_upgrade_to_track_changes": "", "please_change_primary_to_remove": "", "please_compile_pdf_before_download": "", + "please_compile_pdf_before_publish_as_template": "", "please_confirm_primary_email_or_edit": "", "please_confirm_secondary_email_or_edit": "", "please_confirm_your_email_before_making_it_default": "", @@ -1452,8 +1466,10 @@ "presentation_mode": "", "press_shift_space_for_suggestions": "", "press_space_to_open_the_ai_assistant": "", + "prev": "", "preview": "", "preview_editor_tabs": "", + "previous": "", "previous_page": "", "price": "", "primarily_work_study_question": "", @@ -1973,7 +1989,10 @@ "tax_id_type": "", "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')}

+ +
+ + )} +
+
+