Feature: Members section sidebar menu

src/packages/members/manifests.ts

@@ -1,7 +1,8 @@
 import { manifests as memberGroupManifests } from './member-group/manifests.js';
 import { manifests as memberManifests } from './member/manifests.js';
-import { manifests as memberSectionManifests } from './member-section/manifests.js';
 import { manifests as memberTypeManifests } from './member-type/manifests.js';
+import { manifests as sectionManifests } from './section/manifests.js';
+
 import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
 
 import './member/components/index.js';
@@ -10,6 +11,6 @@ import './member-group/components/index.js';
 export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [
 	...memberGroupManifests,
 	...memberManifests,
-	...memberSectionManifests,
 	...memberTypeManifests,
+	...sectionManifests,
 ];

src/packages/members/member-group/entity-actions/create-member-group.action.ts

@@ -0,0 +1,16 @@
+import { UMB_MEMBER_GROUP_WORKSPACE_PATH } from '../paths.js';
+import type { UmbEntityActionArgs } from '@umbraco-cms/backoffice/entity-action';
+import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
+import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
+
+export class UmbCreateMemberGroupEntityAction extends UmbEntityActionBase<never> {
+	constructor(host: UmbControllerHostElement, args: UmbEntityActionArgs<never>) {
+		super(host, args);
+	}
+
+	override async execute() {
+		history.pushState(null, '', UMB_MEMBER_GROUP_WORKSPACE_PATH + '/create');
+	}
+}
+
+export { UmbCreateMemberGroupEntityAction as api };

src/packages/members/member-group/entity-actions/manifests.ts

@@ -2,9 +2,22 @@ import {
 	UMB_MEMBER_GROUP_DETAIL_REPOSITORY_ALIAS,
 	UMB_MEMBER_GROUP_ITEM_REPOSITORY_ALIAS,
 } from '../repository/index.js';
-import { UMB_MEMBER_GROUP_ENTITY_TYPE } from '../entity.js';
+import { UMB_MEMBER_GROUP_ENTITY_TYPE, UMB_MEMBER_GROUP_ROOT_ENTITY_TYPE } from '../entity.js';
 
 export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'entityAction',
+		kind: 'default',
+		alias: 'Umb.EntityAction.MemberGroup.Create',
+		name: 'Create Member Group Entity Action',
+		weight: 1200,
+		api: () => import('./create-member-group.action.js'),
+		forEntityTypes: [UMB_MEMBER_GROUP_ROOT_ENTITY_TYPE],
+		meta: {
+			icon: 'icon-add',
+			label: '#actions_create',
+		},
+	},
 	{
 		type: 'entityAction',
 		kind: 'delete',

src/packages/members/member-group/manifests.ts

@@ -1,17 +1,19 @@
 import { manifests as collectionManifests } from './collection/manifests.js';
 import { manifests as entityActionManifests } from './entity-actions/manifests.js';
 import { manifests as memberGroupPickerModalManifests } from './components/member-group-picker-modal/manifests.js';
+import { manifests as menuItemManifests } from './menu-item/manifests.js';
 import { manifests as propertyEditorManifests } from './property-editor/manifests.js';
 import { manifests as repositoryManifests } from './repository/manifests.js';
-import { manifests as sectionViewManifests } from './section-view/manifests.js';
 import { manifests as workspaceManifests } from './workspace/manifests.js';
 
-export const manifests: Array<UmbExtensionManifest> = [
+import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [
 	...collectionManifests,
 	...entityActionManifests,
 	...memberGroupPickerModalManifests,
+	...menuItemManifests,
 	...propertyEditorManifests,
 	...repositoryManifests,
-	...sectionViewManifests,
 	...workspaceManifests,
 ];

src/packages/members/member-group/menu-item/manifests.ts

@@ -0,0 +1,18 @@
+import { UMB_MEMBER_MANAGEMENT_MENU_ALIAS } from '../../section/menu/constants.js';
+import { UMB_MEMBER_GROUP_ROOT_ENTITY_TYPE } from '../entity.js';
+import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array<ManifestTypes> = [
+	{
+		type: 'menuItem',
+		alias: 'Umb.MenuItem.MemberGroups',
+		name: 'Member Groups Menu Item',
+		weight: 100,
+		meta: {
+			label: '#treeHeaders_memberGroups',
+			icon: 'icon-users',
+			entityType: UMB_MEMBER_GROUP_ROOT_ENTITY_TYPE,
+			menus: [UMB_MEMBER_MANAGEMENT_MENU_ALIAS],
+		},
+	},
+];

src/packages/members/member-group/paths.ts

@@ -0,0 +1,13 @@
+import { UMB_MEMBER_MANAGEMENT_SECTION_PATHNAME } from '../section/paths.js';
+import { UMB_MEMBER_GROUP_ENTITY_TYPE, UMB_MEMBER_GROUP_ROOT_ENTITY_TYPE } from './entity.js';
+import { UMB_WORKSPACE_PATH_PATTERN } from '@umbraco-cms/backoffice/workspace';
+
+export const UMB_MEMBER_GROUP_WORKSPACE_PATH = UMB_WORKSPACE_PATH_PATTERN.generateAbsolute({
+	sectionName: UMB_MEMBER_MANAGEMENT_SECTION_PATHNAME,
+	entityType: UMB_MEMBER_GROUP_ENTITY_TYPE,
+});
+
+export const UMB_MEMBER_GROUP_ROOT_WORKSPACE_PATH = UMB_WORKSPACE_PATH_PATTERN.generateAbsolute({
+	sectionName: UMB_MEMBER_MANAGEMENT_SECTION_PATHNAME,
+	entityType: UMB_MEMBER_GROUP_ROOT_ENTITY_TYPE,
+});

src/packages/members/member-group/workspace/manifests.ts

@@ -1,53 +1,9 @@
-import { UMB_MEMBER_GROUP_ENTITY_TYPE } from '../entity.js';
-import { UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
+import { manifests as memberGroupManifests } from './member-group/manifests.js';
+import { manifests as memberGroupRootManifests } from './member-group-root/manifests.js';
 
-export const UMB_MEMBER_GROUP_WORKSPACE_ALIAS = 'Umb.Workspace.MemberGroup';
+import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
 
-export const manifests: Array<UmbExtensionManifest> = [
-	{
-		type: 'workspace',
-		kind: 'routable',
-		alias: UMB_MEMBER_GROUP_WORKSPACE_ALIAS,
-		name: 'MemberGroup Workspace',
-		api: () => import('./member-group-workspace.context.js'),
-		meta: {
-			entityType: UMB_MEMBER_GROUP_ENTITY_TYPE,
-		},
-	},
-	{
-		type: 'workspaceAction',
-		kind: 'default',
-		alias: 'Umb.WorkspaceAction.MemberGroup.Save',
-		name: 'Save Member Group Workspace Action',
-		api: UmbSubmitWorkspaceAction,
-		meta: {
-			label: '#buttons_save',
-			look: 'primary',
-			color: 'positive',
-		},
-		conditions: [
-			{
-				alias: 'Umb.Condition.WorkspaceAlias',
-				match: UMB_MEMBER_GROUP_WORKSPACE_ALIAS,
-			},
-		],
-	},
-	{
-		type: 'workspaceView',
-		alias: 'Umb.WorkspaceView.Member.Info',
-		name: 'Member Workspace info View',
-		js: () => import('./views/info/member-type-workspace-view-info.element.js'),
-		weight: 300,
-		meta: {
-			label: '#general_info',
-			pathname: 'info',
-			icon: 'icon-document',
-		},
-		conditions: [
-			{
-				alias: 'Umb.Condition.WorkspaceAlias',
-				match: UMB_MEMBER_GROUP_WORKSPACE_ALIAS,
-			},
-		],
-	},
+export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [
+	...memberGroupManifests,
+	...memberGroupRootManifests,
 ];

src/packages/members/member-group/workspace/member-group-root/manifests.ts

@@ -0,0 +1,13 @@
+import { UMB_MEMBER_GROUP_ROOT_ENTITY_TYPE } from '../../entity.js';
+
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'workspace',
+		alias: 'Umb.Workspace.MemberGroupRoot',
+		name: 'Member Group Root Workspace View',
+		element: () => import('./member-group-root-workspace.element.js'),
+		meta: {
+			entityType: UMB_MEMBER_GROUP_ROOT_ENTITY_TYPE,
+		},
+	},
+];

src/packages/members/member-group/workspace/member-group-root/member-group-root-workspace.element.ts

@@ -0,0 +1,21 @@
+import { UMB_MEMBER_GROUP_COLLECTION_ALIAS } from '../../collection/index.js';
+import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+
+const elementName = 'umb-member-group-root-workspace';
+@customElement(elementName)
+export class UmbMemberGroupRootWorkspaceElement extends UmbLitElement {
+	override render() {
+		return html` <umb-body-layout main-no-padding headline=${this.localize.term('treeHeaders_memberGroups')}>
+			<umb-collection alias=${UMB_MEMBER_GROUP_COLLECTION_ALIAS}></umb-collection>;
+		</umb-body-layout>`;
+	}
+}
+
+export { UmbMemberGroupRootWorkspaceElement as element };
+
+declare global {
+	interface HTMLElementTagNameMap {
+		[elementName]: UmbMemberGroupRootWorkspaceElement;
+	}
+}

src/packages/members/member-group/workspace/member-group/manifests.ts

@@ -0,0 +1,64 @@
+import { UMB_MEMBER_GROUP_ENTITY_TYPE } from '../../entity.js';
+import type {
+	ManifestWorkspaces,
+	ManifestWorkspaceActions,
+	ManifestWorkspaceView,
+} from '@umbraco-cms/backoffice/workspace';
+import { UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
+
+export const UMB_MEMBER_GROUP_WORKSPACE_ALIAS = 'Umb.Workspace.MemberGroup';
+
+const workspace: ManifestWorkspaces = {
+	type: 'workspace',
+	kind: 'routable',
+	alias: UMB_MEMBER_GROUP_WORKSPACE_ALIAS,
+	name: 'MemberGroup Workspace',
+	api: () => import('./member-group-workspace.context.js'),
+	meta: {
+		entityType: UMB_MEMBER_GROUP_ENTITY_TYPE,
+	},
+};
+
+const workspaceActions: Array<ManifestWorkspaceActions> = [
+	{
+		type: 'workspaceAction',
+		kind: 'default',
+		alias: 'Umb.WorkspaceAction.MemberGroup.Save',
+		name: 'Save Member Group Workspace Action',
+		api: UmbSubmitWorkspaceAction,
+		meta: {
+			label: '#buttons_save',
+			look: 'primary',
+			color: 'positive',
+		},
+		conditions: [
+			{
+				alias: 'Umb.Condition.WorkspaceAlias',
+				match: UMB_MEMBER_GROUP_WORKSPACE_ALIAS,
+			},
+		],
+	},
+];
+
+export const workspaceViews: Array<ManifestWorkspaceView> = [
+	{
+		type: 'workspaceView',
+		alias: 'Umb.WorkspaceView.Member.Info',
+		name: 'Member Workspace info View',
+		js: () => import('./views/info/member-type-workspace-view-info.element.js'),
+		weight: 300,
+		meta: {
+			label: '#general_info',
+			pathname: 'info',
+			icon: 'icon-document',
+		},
+		conditions: [
+			{
+				alias: 'Umb.Condition.WorkspaceAlias',
+				match: UMB_MEMBER_GROUP_WORKSPACE_ALIAS,
+			},
+		],
+	},
+];
+
+export const manifests: Array<UmbExtensionManifest> = [workspace, ...workspaceActions, ...workspaceViews];

src/packages/members/member-group/workspace/member-group-workspace-editor.element.ts → src/packages/members/member-group/workspace/member-group/member-group-workspace-editor.element.ts

@@ -1,3 +1,4 @@
+import { UMB_MEMBER_GROUP_ROOT_WORKSPACE_PATH } from '../../paths.js';
 import { UMB_MEMBER_GROUP_WORKSPACE_CONTEXT } from './member-group-workspace.context-token.js';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { css, html, customElement, property, state, nothing } from '@umbraco-cms/backoffice/external/lit';
@@ -50,11 +51,12 @@ export class UmbMemberGroupWorkspaceEditorElement extends UmbLitElement {
 
 	override render() {
 		return html`
-			<umb-workspace-editor alias="Umb.Workspace.MemberGroup" back-path="/section/member-management/view/member-groups">
+			<umb-workspace-editor alias="Umb.Workspace.MemberGroup" back-path=${UMB_MEMBER_GROUP_ROOT_WORKSPACE_PATH}>
 				${this.#renderActions()}
 				<div id="header" slot="header">
 					<uui-input id="nameInput" .value=${this._name} @input="${this.#onInput}" ${umbFocus()}></uui-input>
 				</div>
+				<umb-workspace-entity-action-menu slot="action-menu"></umb-workspace-entity-action-menu>
 			</umb-workspace-editor>
 		`;
 	}

src/packages/members/member-group/workspace/member-group-workspace.context.ts → src/packages/members/member-group/workspace/member-group/member-group-workspace.context.ts

@@ -1,5 +1,5 @@
-import { UmbMemberGroupDetailRepository } from '../repository/index.js';
-import type { UmbMemberGroupDetailModel } from '../types.js';
+import { UmbMemberGroupDetailRepository } from '../../repository/index.js';
+import type { UmbMemberGroupDetailModel } from '../../types.js';
 import { UMB_MEMBER_GROUP_WORKSPACE_ALIAS } from './manifests.js';
 import { UmbMemberGroupWorkspaceEditorElement } from './member-group-workspace-editor.element.js';
 import {