Merge pull request #2383 from umbraco/v15/feature/translation-section…

…-package

Feature: Translation package

package.json

@@ -95,6 +95,7 @@
 		"./themes": "./dist-cms/packages/core/themes/index.js",
 		"./tiny-mce": "./dist-cms/packages/rte/tiny-mce/index.js",
 		"./tiptap": "./dist-cms/packages/rte/tiptap/index.js",
+		"./translation": "./dist-cms/packages/translation/index.js",
 		"./tree": "./dist-cms/packages/core/tree/index.js",
 		"./ufm": "./dist-cms/packages/ufm/index.js",
 		"./user-change-password": "./dist-cms/packages/user/change-password/index.js",

src/apps/backoffice/backoffice.element.ts

@@ -41,6 +41,7 @@ const CORE_PACKAGES = [
 	import('../../packages/tags/umbraco-package.js'),
 	import('../../packages/telemetry/umbraco-package.js'),
 	import('../../packages/templating/umbraco-package.js'),
+	import('../../packages/translation/umbraco-package.js'),
 	import('../../packages/ufm/umbraco-package.js'),
 	import('../../packages/umbraco-news/umbraco-package.js'),
 	import('../../packages/user/umbraco-package.js'),

src/assets/lang/en-us.ts

@@ -1309,7 +1309,7 @@ export default {
 		packages: 'Packages',
 		marketplace: 'Marketplace',
 		settings: 'Settings',
-		translation: 'Dictionary',
+		translation: 'Translation',
 		users: 'Users',
 	},
 	help: {

src/assets/lang/en.ts

@@ -1329,7 +1329,7 @@ export default {
 		packages: 'Packages',
 		marketplace: 'Marketplace',
 		settings: 'Settings',
-		translation: 'Dictionary',
+		translation: 'Translation',
 		users: 'Users',
 	},
 	help: {

src/packages/core/dashboard/index.ts

@@ -1,2 +1,3 @@
 export * from './dashboard.extension.js';
 export * from './dashboard-element.interface.js';
+export * from './paths.js';

src/packages/core/dashboard/paths.ts

@@ -0,0 +1,7 @@
+import { UMB_SECTION_PATH_PATTERN } from '@umbraco-cms/backoffice/section';
+import { UmbPathPattern } from '@umbraco-cms/backoffice/router';
+
+export const UMB_DASHBOARD_PATH_PATTERN = new UmbPathPattern<
+	{ dashboardPathname: string },
+	typeof UMB_SECTION_PATH_PATTERN.ABSOLUTE_PARAMS
+>('dashboard/:dashboardPathname', UMB_SECTION_PATH_PATTERN);

src/packages/dictionary/collection/views/table/dictionary-table-collection-view.element.ts

@@ -1,4 +1,5 @@
 import type { UmbDictionaryCollectionModel } from '../../types.js';
+import { UMB_EDIT_DICTIONARY_WORKSPACE_PATH_PATTERN } from '../../../workspace/paths.js';
 import type { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection';
 import { UMB_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/collection';
 import type { UmbTableColumn, UmbTableConfig, UmbTableItem } from '@umbraco-cms/backoffice/components';
@@ -74,17 +75,17 @@ export class UmbDictionaryTableCollectionViewElement extends UmbLitElement {
 
 	#createTableItems(dictionaries: Array<UmbDictionaryCollectionModel>, languages: Array<UmbLanguageDetailModel>) {
 		this._tableItems = dictionaries.map((dictionary) => {
+			const editPath = UMB_EDIT_DICTIONARY_WORKSPACE_PATH_PATTERN.generateAbsolute({
+				unique: dictionary.unique,
+			});
+
 			return {
 				id: dictionary.unique,
 				icon: 'icon-book-alt-2',
 				data: [
 					{
 						columnAlias: 'name',
-						value: html`<a
-							style="font-weight:bold"
-							href="section/dictionary/workspace/dictionary/edit/${dictionary.unique}">
-							${dictionary.name}</a
-						> `,
+						value: html`<a style="font-weight:bold" href=${editPath}> ${dictionary.name}</a> `,
 					},
 					...languages.map((language) => {
 						return {

src/packages/dictionary/dashboard/index.ts

@@ -0,0 +1 @@
+export * from './paths.js';

src/packages/dictionary/dashboard/manifests.ts

@@ -1,4 +1,4 @@
-import { UMB_DICTIONARY_SECTION_ALIAS } from '../section/index.js';
+import { UMB_TRANSLATION_SECTION_ALIAS } from '@umbraco-cms/backoffice/translation';
 
 export const manifests: Array<UmbExtensionManifest> = [
 	{
@@ -8,12 +8,12 @@ export const manifests: Array<UmbExtensionManifest> = [
 		element: () => import('./dictionary-overview-dashboard.element.js'),
 		meta: {
 			label: '#dictionaryItem_overviewTitle',
-			pathname: '',
+			pathname: 'dictionary-overview',
 		},
 		conditions: [
 			{
 				alias: 'Umb.Condition.SectionAlias',
-				match: UMB_DICTIONARY_SECTION_ALIAS,
+				match: UMB_TRANSLATION_SECTION_ALIAS,
 			},
 		],
 	},

src/packages/dictionary/dashboard/paths.ts

@@ -0,0 +1,9 @@
+import { UMB_DASHBOARD_PATH_PATTERN } from '@umbraco-cms/backoffice/dashboard';
+import { UMB_TRANSLATION_SECTION_PATHNAME } from '@umbraco-cms/backoffice/translation';
+
+export const UMB_DICTIONARY_OVERVIEW_DASHBOARD_PATHNAME = 'dictionary-overview';
+
+export const UMB_DICTIONARY_OVERVIEW_DASHBOARD_PATH = UMB_DASHBOARD_PATH_PATTERN.generateAbsolute({
+	sectionName: UMB_TRANSLATION_SECTION_PATHNAME,
+	dashboardPathname: UMB_DICTIONARY_OVERVIEW_DASHBOARD_PATHNAME,
+});

src/packages/dictionary/entity-action/create/create.action.ts

@@ -1,18 +1,14 @@
-import type { UmbEntityActionArgs } from '@umbraco-cms/backoffice/entity-action';
 import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
-import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { UMB_CREATE_DICTIONARY_WORKSPACE_PATH_PATTERN } from '../../workspace/index.js';
 
 export class UmbCreateDictionaryEntityAction extends UmbEntityActionBase<never> {
-	constructor(host: UmbControllerHost, args: UmbEntityActionArgs<never>) {
-		super(host, args);
-	}
-
 	override async execute() {
-		history.pushState(
-			{},
-			'',
-			`/section/dictionary/workspace/dictionary/create/parent/${this.args.entityType}/${this.args.unique ?? 'null'}`,
-		);
+		const createPath = UMB_CREATE_DICTIONARY_WORKSPACE_PATH_PATTERN.generateAbsolute({
+			parentEntityType: this.args.entityType,
+			parentUnique: this.args.unique ?? 'null',
+		});
+
+		history.pushState({}, '', createPath);
 	}
 }
 

src/packages/dictionary/index.ts

@@ -3,3 +3,4 @@ export * from './tree/index.js';
 export * from './modals/dictionary-picker-modal.token.js';
 export * from './entity.js';
 export * from './components/index.js';
+export * from './workspace/paths.js';

src/packages/dictionary/manifests.ts

@@ -1,19 +1,17 @@
 import { manifests as collectionManifests } from './collection/manifests.js';
 import { manifests as dashboardManifests } from './dashboard/manifests.js';
 import { manifests as entityActionManifests } from './entity-action/manifests.js';
-import { manifests as menuManifests } from './menu/manifests.js';
+import { manifests as menuItemManifests } from './menu-item/manifests.js';
 import { manifests as repositoryManifests } from './repository/manifests.js';
-import { manifests as sectionManifests } from './section/manifests.js';
 import { manifests as treeManifests } from './tree/manifests.js';
 import { manifests as workspaceManifests } from './workspace/manifests.js';
 
 export const manifests: Array<UmbExtensionManifest> = [
 	...collectionManifests,
 	...dashboardManifests,
 	...entityActionManifests,
-	...menuManifests,
+	...menuItemManifests,
 	...repositoryManifests,
-	...sectionManifests,
 	...treeManifests,
 	...workspaceManifests,
 ];

src/packages/dictionary/menu/manifests.ts → src/packages/dictionary/menu-item/manifests.ts

@@ -1,13 +1,8 @@
 import { UMB_DICTIONARY_ENTITY_TYPE } from '../entity.js';
 import { UMB_DICTIONARY_TREE_ALIAS } from '../tree/index.js';
-import { UMB_DICTIONARY_MENU_ALIAS } from './constants.js';
+import { UMB_TRANSLATION_MENU_ALIAS } from '@umbraco-cms/backoffice/translation';
 
 export const manifests: Array<UmbExtensionManifest> = [
-	{
-		type: 'menu',
-		alias: UMB_DICTIONARY_MENU_ALIAS,
-		name: 'Dictionary Menu',
-	},
 	{
 		type: 'menuItem',
 		kind: 'tree',
@@ -18,7 +13,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 			label: 'Dictionary',
 			icon: 'icon-book-alt',
 			entityType: UMB_DICTIONARY_ENTITY_TYPE,
-			menus: [UMB_DICTIONARY_MENU_ALIAS],
+			menus: [UMB_TRANSLATION_MENU_ALIAS],
 			treeAlias: UMB_DICTIONARY_TREE_ALIAS,
 			hideTreeRoot: true,
 		},

src/packages/dictionary/workspace/dictionary-workspace-editor.element.ts

@@ -1,11 +1,12 @@
+import { UMB_DICTIONARY_OVERVIEW_DASHBOARD_PATH } from '../dashboard/index.js';
 import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 @customElement('umb-dictionary-workspace-editor')
 export class UmbDictionaryWorkspaceEditorElement extends UmbLitElement {
 	override render() {
 		return html`
-			<umb-workspace-editor back-path="section/dictionary/dashboard">
+			<umb-workspace-editor back-path=${UMB_DICTIONARY_OVERVIEW_DASHBOARD_PATH}>
 				<umb-workspace-header-name-editable slot="header"></umb-workspace-header-name-editable>
 			</umb-workspace-editor>
 		`;

src/packages/dictionary/workspace/index.ts

@@ -0,0 +1 @@
+export * from './paths.js';

src/packages/dictionary/workspace/paths.ts

@@ -0,0 +1,19 @@
+import { UMB_DICTIONARY_ENTITY_TYPE } from '../entity.js';
+import { UmbPathPattern } from '@umbraco-cms/backoffice/router';
+import { UMB_TRANSLATION_SECTION_PATHNAME } from '@umbraco-cms/backoffice/translation';
+import { UMB_WORKSPACE_PATH_PATTERN } from '@umbraco-cms/backoffice/workspace';
+import type { UmbEntityModel, UmbEntityUnique } from '@umbraco-cms/backoffice/entity';
+
+export const UMB_DICTIONARY_WORKSPACE_PATH = UMB_WORKSPACE_PATH_PATTERN.generateAbsolute({
+	sectionName: UMB_TRANSLATION_SECTION_PATHNAME,
+	entityType: UMB_DICTIONARY_ENTITY_TYPE,
+});
+
+export const UMB_CREATE_DICTIONARY_WORKSPACE_PATH_PATTERN = new UmbPathPattern<{
+	parentEntityType: UmbEntityModel['entityType'];
+	parentUnique: UmbEntityUnique;
+}>('create/parent/:parentEntityType/:parentUnique', UMB_DICTIONARY_WORKSPACE_PATH);
+
+export const UMB_EDIT_DICTIONARY_WORKSPACE_PATH_PATTERN = new UmbPathPattern<{
+	unique: UmbEntityUnique;
+}>('edit/:unique', UMB_DICTIONARY_WORKSPACE_PATH);

src/packages/translation/index.ts

@@ -0,0 +1,2 @@
+export * from './section/index.js';
+export * from './menu/index.js';

src/packages/translation/manifests.ts

@@ -0,0 +1,4 @@
+import { manifests as sectionManifests } from './section/manifests.js';
+import { manifests as menuManifests } from './menu/manifests.js';
+
+export const manifests: Array<UmbExtensionManifest> = [...sectionManifests, ...menuManifests];

src/packages/translation/menu/constants.ts

@@ -0,0 +1 @@
+export const UMB_TRANSLATION_MENU_ALIAS = 'Umb.Menu.Translation';

src/packages/translation/menu/index.ts

@@ -0,0 +1 @@
+export * from './constants.js';

src/packages/translation/menu/manifests.ts

@@ -0,0 +1,28 @@
+import { UMB_TRANSLATION_SECTION_ALIAS } from '../section/index.js';
+import { UMB_TRANSLATION_MENU_ALIAS } from './constants.js';
+
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'menu',
+		alias: UMB_TRANSLATION_MENU_ALIAS,
+		name: 'Translation Menu',
+	},
+	{
+		type: 'sectionSidebarApp',
+		kind: 'menuWithEntityActions',
+		alias: 'Umb.SidebarMenu.Translation',
+		name: 'Translation Sidebar Menu',
+		weight: 100,
+		meta: {
+			label: '#sections_translation',
+			menu: UMB_TRANSLATION_MENU_ALIAS,
+			entityType: 'dictionary-root', // hard-coded on purpose to avoid circular dependency. We need another way to add actions to a menu kind.
+		},
+		conditions: [
+			{
+				alias: 'Umb.Condition.SectionAlias',
+				match: UMB_TRANSLATION_SECTION_ALIAS,
+			},
+		],
+	},
+];

src/packages/translation/section/constants.ts

@@ -0,0 +1 @@
+export const UMB_TRANSLATION_SECTION_ALIAS = 'Umb.Section.Translation';

src/packages/translation/section/index.ts

@@ -0,0 +1,2 @@
+export * from './constants.js';
+export * from './paths.js';

src/packages/translation/section/manifests.ts

@@ -0,0 +1,20 @@
+import { UMB_TRANSLATION_SECTION_ALIAS } from './constants.js';
+
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'section',
+		alias: UMB_TRANSLATION_SECTION_ALIAS,
+		name: 'Translation Section',
+		weight: 400,
+		meta: {
+			label: '#sections_translation',
+			pathname: 'translation',
+		},
+		conditions: [
+			{
+				alias: 'Umb.Condition.SectionUserPermission',
+				match: UMB_TRANSLATION_SECTION_ALIAS,
+			},
+		],
+	},
+];

src/packages/translation/section/paths.ts

@@ -0,0 +1,6 @@
+import { UMB_SECTION_PATH_PATTERN } from '@umbraco-cms/backoffice/section';
+
+export const UMB_TRANSLATION_SECTION_PATHNAME = 'translation';
+export const UMB_TRANSLATION_SECTION_PATH = UMB_SECTION_PATH_PATTERN.generateAbsolute({
+	sectionName: UMB_TRANSLATION_SECTION_PATHNAME,
+});

src/packages/translation/umbraco-package.ts

@@ -0,0 +1,9 @@
+export const name = 'Umbraco.Core.Translation';
+export const extensions = [
+	{
+		name: 'Umbraco Translation Bundle',
+		alias: 'Umb.Bundle.Translation',
+		type: 'bundle',
+		js: () => import('./manifests.js'),
+	},
+];

src/packages/translation/vite.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite';
+import { rmSync } from 'fs';
+import { getDefaultConfig } from '../../vite-config-base';
+
+const dist = '../../../dist-cms/packages/translation';
+
+// delete the unbundled dist folder
+rmSync(dist, { recursive: true, force: true });
+
+export default defineConfig({
+	...getDefaultConfig({ dist }),
+});

tsconfig.json

@@ -123,6 +123,7 @@ DON'T EDIT THIS FILE DIRECTLY. It is generated by /devops/tsconfig/index.js
 			"@umbraco-cms/backoffice/themes": ["./src/packages/core/themes/index.ts"],
 			"@umbraco-cms/backoffice/tiny-mce": ["./src/packages/rte/tiny-mce/index.ts"],
 			"@umbraco-cms/backoffice/tiptap": ["./src/packages/rte/tiptap/index.ts"],
+			"@umbraco-cms/backoffice/translation": ["./src/packages/translation/index.ts"],
 			"@umbraco-cms/backoffice/tree": ["./src/packages/core/tree/index.ts"],
 			"@umbraco-cms/backoffice/ufm": ["./src/packages/ufm/index.ts"],
 			"@umbraco-cms/backoffice/user-change-password": ["./src/packages/user/change-password/index.ts"],