@fc3/mmcadi 0.1.0 → 0.1.2

package/src/server/result-serializer/action.ts

@@ -1,939 +0,0 @@
-import {InvariantViolation} from 'lib/errors';
-import {Session} from 'lib/execution-context';
-
-import BaseResultSerializer from 'server/result-serializer/base';
-import Action from 'type/action';
-import CustomPageType from 'server/enum/custom-page-type';
-import ImageBlock from 'type/block/image';
-import LinkBlock from 'type/block/link';
-import PermissionType from 'enum/permission-type';
-import PageType from 'client/enum/page-type';
-import getBlockPermissions from 'server/utility/get-block-permissions';
-import getPathForFolderBlock from 'server/utility/get-path-for-folder-block';
-import validatePath from 'server/utility/validate-path';
-import Block from 'type/block';
-import Color from 'enum/color';
-import getHexForColor from 'server/utility/get-hex-for-color';
-import createDate from 'server/utility/create-date';
-import NoteBlock from 'type/block/note';
-import DefaultRole from 'enum/default-role';
-import AudioBlock from 'type/block/audio';
-import Account from 'type/account';
-import Emoji from 'enum/emoji';
-import HeaderBlock from 'type/block/header';
-import TodoBlock from 'type/block/todo';
-import serializeTimePlaceOptions from 'server/result-serializer/common/time-place-options';
-import getLabelForTimePlaceVisibility from 'server/utility/get-label-for-time-place-visibility';
-import TimePlaceVisibility from 'enum/time-place-visibility';
-import MultiColumnBlock from 'type/block/multi-column';
-import DeleteBlockAction from 'type/action/delete-block';
-import getElementIdForBlock from 'server/utility/get-element-id-for-block';
-import FolderBlock from 'type/block/folder';
-import BlockMetadata from 'type/block-metadata';
-import AddBlockAction from 'type/action/add-block';
-import EditBlockAction from 'type/action/edit-block';
-import getEmojiForBlockType from 'server/utility/get-emoji-for-block-type';
-import BlockType from 'enum/block-type';
-import ActionType from 'enum/action-type';
-import BlockResultSerializerFactory from 'server/factory/block-result-serializer';
-
-type ModifyBlockAction = AddBlockAction | EditBlockAction;
-
-type BlockAndMetadata = {
-	readonly block: Block;
-	readonly metadata: BlockMetadata;
-};
-
-type ActionMetadata = {
-	readonly account: Account;
-	readonly roles: string[];
-	readonly provider_paths: string[];
-};
-
-function getBlockIdForAction(action: ModifyBlockAction, action_metadata: ActionMetadata): string {
-	const {
-		block,
-		metadata
-	} = buildBlockAndMetadataForAction(action, action_metadata);
-
-	return getElementIdForBlock(block, metadata);
-}
-
-function getPrivacyEmojiForRole(role: string, roles: string[]): Emoji {
-	switch (role) {
-		case DefaultRole.PUBLIC:
-			return Emoji.GRID_GLOBE;
-		case DefaultRole.CREATOR:
-			return Emoji.LOCKED;
-		default:
-			return Emoji.WINDOW;
-	}
-}
-
-function serializeColorInputs(attribute: string, selected_color: Color): string {
-	const colors = Object.values(Color);
-
-	const serialized_colors = colors.map((color) => {
-		const hex = getHexForColor(color);
-		const checked_attribute = color === selected_color ? 'checked' : '';
-
-		return `
-			<input autocomplete="off" class="color-option" type="radio" ${checked_attribute} id="${attribute}-${color}" name="${attribute}" value="${color}" />
-			<label class="mb-0" for="${attribute}-${color}" style="background-color:${hex}">
-				${color}
-			</label>
-		`;
-	});
-
-	return serialized_colors.join('\n');
-}
-
-function buildBlockForAction(action: ModifyBlockAction, metadata: ActionMetadata): Block {
-	const {action_type} = action;
-
-	if (action_type === ActionType.EDIT_BLOCK) {
-		const {block} = action as EditBlockAction;
-
-		if (block === undefined) {
-			throw new InvariantViolation(`
-				Received an EditBlockAction with no block specified
-			`);
-		}
-
-		return block;
-	}
-
-	const {
-		block_type,
-		create_role,
-		read_role,
-		update_role,
-		delete_role
-	} = action as AddBlockAction;
-
-	const permissions = {
-		[PermissionType.CREATE]: create_role,
-		[PermissionType.READ]: read_role,
-		[PermissionType.UPDATE]: update_role,
-		[PermissionType.DELETE]: delete_role
-	};
-
-	const {account} = metadata;
-	const {settings} = account;
-	const {default_time_place_visibility: visibility} = settings;
-	const created_at = Date.now();
-
-	const time = TimePlaceVisibility.TIME;
-	const place = TimePlaceVisibility.PLACE;
-	const both = TimePlaceVisibility.BOTH;
-
-	const show_place = visibility === place || visibility === both;
-	const show_time = visibility === time || visibility === both;
-
-	switch (block_type) {
-		case BlockType.AUDIO:
-			return {
-				block_type: BlockType.AUDIO,
-				show_place,
-				show_time,
-				created_at,
-				files: [],
-				permissions
-			} as AudioBlock;
-
-		case BlockType.IMAGE:
-			return {
-				block_type: BlockType.IMAGE,
-				show_place,
-				show_time,
-				created_at,
-				files: [],
-				permissions
-			} as ImageBlock;
-
-		case BlockType.NOTE:
-			return {
-				block_type: BlockType.NOTE,
-				show_place,
-				show_time,
-				created_at,
-				text: '',
-				permissions
-			} as NoteBlock;
-
-		case BlockType.TODO:
-			return {
-				block_type: BlockType.TODO,
-				show_place,
-				show_time,
-				created_at,
-				completed_at: null,
-				title: '',
-				permissions
-			} as TodoBlock;
-
-		case BlockType.HEADER:
-			return {
-				block_type: BlockType.HEADER,
-				show_place,
-				show_time,
-				created_at,
-				title: '',
-				permissions
-			} as HeaderBlock;
-
-		case BlockType.FOLDER:
-			return {
-				block_type: BlockType.FOLDER,
-				show_place,
-				show_time,
-				created_at,
-				title: '',
-				subtitle: '',
-				emoji: Emoji.FOLDER,
-				color: Color.GREY,
-				permissions
-			} as FolderBlock;
-
-		case BlockType.LINK:
-			return {
-				block_type: BlockType.LINK,
-				show_place,
-				show_time,
-				created_at,
-				href: '',
-				label: '',
-				color: Color.GREY,
-				permissions
-			} as LinkBlock;
-
-		case BlockType.MULTI_COLUMN:
-			return {
-				block_type: BlockType.MULTI_COLUMN,
-				show_place,
-				show_time,
-				created_at,
-				children: [],
-				max_columns: 3,
-				permissions
-			} as MultiColumnBlock;
-
-		default:
-			throw new InvariantViolation(`Unsupported block type: ${block_type}`);
-	}
-}
-
-function buildMetadataForAction(action: ModifyBlockAction, action_metadata: ActionMetadata): BlockMetadata {
-	const {path, editing, index_path} = action;
-	const {roles, account} = action_metadata;
-	const creator_username = '0xfc3';
-
-	validatePath(path);
-
-	return {
-		page_path: path,
-		editing,
-		// TODO: Investigate whether there's a way to preserve this
-		referrer_url: null,
-		index_path,
-		target_index_path: null,
-		roles,
-		account,
-		creator_username
-	};
-}
-
-function buildBlockAndMetadataForAction(action: ModifyBlockAction, action_metadata: ActionMetadata): BlockAndMetadata {
-	const block = buildBlockForAction(action, action_metadata);
-	const metadata = buildMetadataForAction(action, action_metadata);
-
-	return {
-		block,
-		metadata
-	};
-}
-
-
-
-class ActionResultSerializer extends BaseResultSerializer<Partial<Action>> {
-	private metadata: ActionMetadata;
-
-	public constructor(
-		result: Partial<Action>,
-		metadata: ActionMetadata,
-		path: string,
-		referrer_url: string,
-		session: Session
-	) {
-		super(result, path, referrer_url, session);
-
-		this.metadata = metadata;
-	}
-
-	protected getTitle(): string {
-		const {action_type, path} = this.getResult();
-
-		return `applying action ${action_type} to page ${path}`;
-	}
-
-	protected getPageType(): PageType {
-		const {action_type} = this.getResult();
-
-		switch (action_type) {
-			case ActionType.ADD_BLOCK:
-				return PageType.SELECT_BLOCK_TYPE;
-			case ActionType.DELETE_BLOCK:
-				return PageType.CONFIRM_DELETE_BLOCK;
-			case ActionType.EDIT_BLOCK:
-				return PageType.EDIT_BLOCK;
-			default:
-				throw new InvariantViolation(`
-					Unsupported action type when mapping to page type: ${action_type}
-				`);
-		}
-	}
-
-	protected serializeSections(): string {
-		const action = this.getResult();
-		const {action_type} = action;
-
-		switch (action_type) {
-			case ActionType.ADD_BLOCK:
-				return this.serializeAddBlock(action as AddBlockAction);
-
-			case ActionType.DELETE_BLOCK:
-				return this.serializeDeleteBlock(action as DeleteBlockAction);
-
-			case ActionType.EDIT_BLOCK:
-				return this.serializeModifiableBlock(action as EditBlockAction);
-
-			default:
-				throw new InvariantViolation(`
-					Invalid action type: ${action_type}
-				`);
-		}
-	}
-
-	private serializeAddBlock(action: AddBlockAction): string {
-		const {block_type} = action;
-
-		if (block_type === undefined) {
-			return this.serializeUnselectedBlockType(action);
-		}
-
-		return this.serializeModifiableBlock(action);
-	}
-
-	private serializeModifiableBlock(action: ModifyBlockAction): string {
-		const metadata = this.getMetadata();
-		const {block_type} = buildBlockForAction(action, metadata);
-
-		switch (block_type) {
-			case BlockType.NOTE:
-				return this.serializeModifiableNoteBlock(action);
-
-			case BlockType.TODO:
-				return this.serializeModifiableTodoBlock(action);
-
-			case BlockType.IMAGE:
-				return this.serializeModifiableImageBlock(action);
-
-			case BlockType.AUDIO:
-				return this.serializeModifiableAudioBlock(action);
-
-			case BlockType.HEADER:
-				return this.serializeModifiableHeaderBlock(action);
-
-			case BlockType.FOLDER:
-				return this.serializeModifiableFolderBlock(action);
-
-			case BlockType.MULTI_COLUMN:
-				return this.serializeModifiableMultiColumnBlock(action);
-
-			case BlockType.LINK:
-				return this.serializeModifiableLinkBlock(action);
-
-			default:
-				throw new InvariantViolation(`
-					Invalid block type: ${block_type}
-				`);
-		}
-	}
-
-	private serializeUnselectedBlockType(action: AddBlockAction): string {
-		const {path, editing, index_path} = action;
-
-		function serializeBlockLink(block_type: BlockType, last = false): string {
-			const offset_class = last ? '' : 'mb-8';
-			const emoji = getEmojiForBlockType(block_type);
-			const block_type_label = block_type.replace(/_/g, '-');
-			const first_letter = block_type[0];
-
-			return `
-				<li class="${offset_class}">
-					<a id="add-block-${block_type}" href="/actions?action_type=${ActionType.ADD_BLOCK}&editing=${editing}&path=${path}&index_path=${index_path}&block_type=${block_type}" class="biglink yellow align-left">
-						${emoji} ${block_type_label} <span class="half-opacity">[${first_letter}]</span>
-					</a>
-				</li>
-			`;
-		}
-
-		return `
-			<section>
-				<h2>${Emoji.BOOKS} add block:</h2>
-				<ul>
-					${serializeBlockLink(BlockType.NOTE)}
-					${serializeBlockLink(BlockType.IMAGE)}
-					${serializeBlockLink(BlockType.AUDIO)}
-					${serializeBlockLink(BlockType.TODO)}
-					${serializeBlockLink(BlockType.HEADER)}
-					${serializeBlockLink(BlockType.LINK)}
-					${serializeBlockLink(BlockType.FOLDER)}
-					${serializeBlockLink(BlockType.MULTI_COLUMN)}
-				</ul>
-			</section>
-
-			<!--
-			<section>
-				<h2>create page:</h2>
-				<ul>
-					<li>
-						<a href="/actions?action_type=${ActionType.CREATE_PAGE}&custom_page_type=${CustomPageType.BLANK}" class="biglink align-left">
-							${Emoji.DOCUMENT} blank
-						</a>
-					</li>
-					<li class="mt-8">
-						<a href="/actions?action_type=${ActionType.CREATE_PAGE}&custom_page_type=${CustomPageType.FORM}" class="biglink align-left">
-							${Emoji.RECEIPT} form
-						</a>
-					<li class="mt-8">
-					</li>
-						<a href="/actions?action_type=${ActionType.CREATE_PAGE}&custom_page_type=${CustomPageType.PRODUCT}" class="biglink align-left">
-							${Emoji.SHOPPING_BAGS} product
-						</a>
-					</li>
-				</ul>
-			</section>
-			-->
-		`;
-	}
-
-	private serializeModifiableImageBlock(action: ModifyBlockAction): string {
-		const {path} = action;
-
-		return this.wrapModifyBlockAction(action, `
-			<fieldset>
-				<legend>${Emoji.CAMERA} adding image(s) to page: [${path}]</legend>
-				<div class="file-wrapper">
-					<input id="file-input" type="file" name="files" accept="image/*" multiple />
-					<label class="biglink" for="files">select images</label>
-				</div>
-			</fieldset>
-		`);
-	}
-
-	private serializeModifiableAudioBlock(action: ModifyBlockAction): string {
-		const {path} = action;
-
-		return this.wrapModifyBlockAction(action, `
-			<fieldset>
-				<legend>${Emoji.MICROPHONE} adding audio to page: [${path}]</legend>
-				<div class="file-wrapper">
-					<input type="file" name="files" accept="audio/*" capture />
-					<label class="biglink" for="files">upload audio</label>
-				</div>
-			</fieldset>
-		`);
-	}
-
-	private serializeModifiableTodoBlock(action: ModifyBlockAction): string {
-		const {path, action_type} = action;
-		const is_adding = action_type === ActionType.ADD_BLOCK;
-		const verb = is_adding ? 'adding' : 'updating';
-		const metadata = this.getMetadata();
-		const block = buildBlockForAction(action, metadata);
-		const todo_block = block as TodoBlock;
-		const title = todo_block.title || '';
-		const placeholder = title || 'enter todo';
-		const {completed_at} = todo_block;
-		const completed = completed_at !== null;
-		const checked_attribute = completed ? 'checked' : '';
-
-		return this.wrapModifyBlockAction(action, `
-			<fieldset>
-				<legend>${Emoji.COMPLETED_CHECKMARK} ${verb} todo on page: [${path}]</legend>
-				<input id="text-input" name="title" placeholder="${placeholder}" autofocus autocomplete="off" value="${title}" />
-			</fieldset>
-
-			<fieldset>
-				<legend>completed?</legend>
-				<input type="checkbox" name="completed" ${checked_attribute} />
-				<label for="completed">immediately mark this task as complete</label>
-			</fieldset>
-		`);
-	}
-
-	private serializeModifiableNoteBlock(action: ModifyBlockAction): string {
-		const {path, action_type} = action;
-		const is_adding = action_type === ActionType.ADD_BLOCK;
-		const verb = is_adding ? 'adding' : 'updating';
-		const metadata = this.getMetadata();
-		const block = buildBlockForAction(action, metadata);
-		const {text} = block as NoteBlock;
-
-		return this.wrapModifyBlockAction(action, `
-			<fieldset>
-				<legend>${Emoji.NOTEPAD} ${verb} text on page: [${path}]</legend>
-				<textarea id="text-input" name="text" placeholder="${text}" autofocus autocomplete="off">${text}</textarea>
-			</fieldset>
-		`);
-	}
-
-	private serializeModifiableHeaderBlock(action: ModifyBlockAction): string {
-		const {path} = action;
-
-		return this.wrapModifyBlockAction(action, `
-			<fieldset>
-				<legend>${Emoji.PLACARD} adding title to page: [${path}]</legend>
-				<input name="title" type="text" placeholder="your title here" autofocus autocomplete="off" />
-			</fieldset>
-		`);
-	}
-
-	private serializeModifiableLinkBlock(action: ModifyBlockAction): string {
-		const metadata = this.getMetadata();
-		const block = buildBlockForAction(action, metadata);
-		const link_block = block as LinkBlock;
-		const {label, href, color} = link_block;
-
-		const color_inputs = serializeColorInputs('color', color);
-
-		return this.wrapModifyBlockAction(action, `
-			<fieldset>
-				<legend>${Emoji.LINK} link target</legend>
-				<p class="text-smaller half-opacity">
-					the URL where your link should point
-				</p>
-				<input id="href-text-input" name="href" type="text" placeholder="${href}" value="${href}" autofocus autocomplete="off" />
-			</fieldset>
-
-			<fieldset>
-				<legend>${Emoji.SIGN} link label</legend>
-				<p class="text-smaller half-opacity">
-					the text label for your link
-				</p>
-				<input id="label-text-input" name="label" type="text" placeholder="${label}" value="${label}" autocomplete="off" />
-			</fieldset>
-
-			<fieldset>
-				<legend>${Emoji.PALETTE} link color</legend>
-				<div class="pt-8">
-					${color_inputs}
-				</div>
-			</fieldset>
-		`);
-	}
-
-	private serializeModifiableMultiColumnBlock(action: ModifyBlockAction): string {
-		const {path} = action;
-		const metadata = this.getMetadata();
-		const {block} = buildBlockAndMetadataForAction(action, metadata);
-		const {max_columns} = block as MultiColumnBlock;
-
-		return this.wrapModifyBlockAction(action, `
-			<fieldset>
-				<legend>${Emoji.BAR_CHART} adding multi-column block to page: [${path}]</legend>
-
-				<p>max columns:</p>
-
-				<div class="p-16">
-					<input type="range" min="1" max="8" value="${max_columns}" id="max-columns" name="max_columns" list="column_values" />
-
-					<datalist id="column_values">
-						<option value="1" label="1"></option>
-						<option value="2" label="2"></option>
-						<option value="3" label="3"></option>
-						<option value="4" label="4"></option>
-						<option value="5" label="5"></option>
-						<option value="6" label="6"></option>
-						<option value="7" label="7"></option>
-						<option value="8" label="8"></option>
-					</datalist>
-				</div>
-			</fieldset>
-		`);
-	}
-
-	private serializeModifiableFolderBlock(action: ModifyBlockAction): string {
-		const {action_type, path} = action;
-		const is_adding = action_type === ActionType.ADD_BLOCK;
-		const adjective = is_adding ? 'new' : 'updated';
-		const metadata = this.getMetadata();
-		const block = buildBlockForAction(action, metadata);
-		const folder_block = block as FolderBlock;
-		const {title, subtitle, emoji, color} = folder_block;
-		const block_id = getBlockIdForAction(action, metadata);
-
-		const folder_path = getPathForFolderBlock({
-			base_path: path,
-			block: folder_block
-		});
-
-		const color_inputs = serializeColorInputs('color', color);
-
-		return this.wrapModifyBlockAction(action, `
-			<fieldset>
-				<legend>${Emoji.FOLDER} folder title</legend>
-				<p class="text-smaller half-opacity">
-					your ${adjective} page will live at:
-				</p>
-				<p class="text-smaller">
-					<code class="text-yellow" id="${block_id}-folder-path-target">${folder_path}</code>
-				</p>
-				<input id="title-text-input" name="title" type="text" placeholder="${title}" value="${title}" autofocus autocomplete="off" />
-			</fieldset>
-
-			<fieldset>
-				<legend>${Emoji.SUN_WITH_FACE} preview emoji</legend>
-				<p class="text-smaller half-opacity">
-					<span class="text-bold">[optional]</span> appears inside the folder button on its parent page
-				</p>
-				<input id="emoji-text-input" name="emoji" type="text" placeholder="${emoji}" value="${emoji}" autocomplete="off" />
-			</fieldset>
-
-			<fieldset>
-				<legend>${Emoji.NOTEPAD} folder subtitle</legend>
-				<p class="text-smaller half-opacity">
-					<span class="text-bold">[optional]</span> appears below the folder name
-				</p>
-				<input id="subtitle-text-input" name="subtitle" type="text" placeholder="${subtitle}" value="${subtitle}" autocomplete="off" />
-			</fieldset>
-
-			<fieldset>
-				<legend>${Emoji.PALETTE} link color</legend>
-				<div class="pt-8">
-					${color_inputs}
-				</div>
-			</fieldset>
-		`);
-	}
-
-	private wrapModifyBlockAction(action: ModifyBlockAction, block_specific_markup: string): string {
-		const {path, editing, action_type, index_path} = action;
-		const action_metadata = this.getMetadata();
-
-		const {
-			block,
-			metadata
-		} = buildBlockAndMetadataForAction(action, action_metadata);
-
-		const {block_type} = block;
-		const session = this.getSession();
-
-		const updated_metadata = {
-			...metadata,
-			editing: false
-		};
-
-		const factory = new BlockResultSerializerFactory(block, updated_metadata, session);
-
-		const serializer = factory.create();
-		const block_preview = serializer.serializeContent();
-		const selected_color = block.color || Color.GREY;
-		const color_inputs = serializeColorInputs('border_color', selected_color);
-		const time_place_section = this.renderTimePlaceSection(block);
-		const permissions_section = this.renderPermissionsSection(block);
-
-		return `
-			<section class="grey">
-				<fieldset>
-					<legend>${Emoji.MAGNIFYING_GLASS} preview</legend>
-					${block_preview}
-				</fieldset>
-
-				<form class="mt-64" enctype="multipart/form-data" method="post" action="/actions?editing=${editing}">
-					<input type="hidden" name="action_type" value="${action_type}" />
-					<input type="hidden" name="path" value="${path}" />
-					<input type="hidden" name="index_path" value="${index_path}" />
-					<input type="hidden" name="block_type" value="${block_type}" />
-
-					${block_specific_markup}
-
-					<fieldset class="mt-64">
-						<legend>${Emoji.GEAR} additional settings</legend>
-
-						<details class="mb-8 clearfix">
-							<summary>
-								<span>border color</span>
-								<span class="summary-label">
-									<span class="icon" style="background-color: ${selected_color}"></span>
-									${selected_color}
-								</span>
-							</summary>
-
-							<p class="mb-32 clearfix">
-								${color_inputs}
-							</p>
-
-							<aside>
-								colors are defined in your <a href="/settings">account settings</a>.
-							</aside>
-						</details>
-
-						${permissions_section}
-						${time_place_section}
-
-					</fieldset>
-
-					<table class="button-row fixed mt-32">
-						<tbody>
-							<tr>
-								<td>
-									<a class="biglink grey" href="${path}?editing=true">
-										${Emoji.LEFT_ARROW_UNICODE} cancel
-									</a>
-								</td>
-
-								<td>
-									<button class="biglink green" type="submit">
-										submit ${Emoji.RIGHT_ARROW_UNICODE}
-									</button>
-								</td>
-							</tr>
-						</tbody>
-					</table>
-				</form>
-			</section>
-		`;
-	}
-
-	private renderPermissionsSection(block: Block): string {
-		const permissions = getBlockPermissions(block);
-		const permission_types = Object.keys(permissions) as PermissionType[];
-		const {roles} = this.getMetadata();
-
-		const permission_rows: string[] = [];
-		const summary_emojis: string[] = [];
-
-		function renderPermissionOptions(selected_role: string): string {
-			const serialized_options = roles.map((role) => {
-				const selected_attribute = selected_role === role ? 'selected' : '';
-
-				return `
-					<option ${selected_attribute} value="${role}">
-						${role}
-					</option>
-				`;
-			});
-
-			return serialized_options.join('\n');
-		}
-
-		Object.entries(permissions).forEach(([permission_type, role]) => {
-			const emoji = getPrivacyEmojiForRole(role, roles);
-			const options = renderPermissionOptions(role);
-
-			const row = `
-				<tr>
-					<td>
-						${permission_type}
-					</td>
-					<td>
-						<select name="${permission_type}_role" autocomplete="off">
-							${options}
-						</select>
-					</td>
-				</tr>
-			`;
-
-			permission_rows.push(row);
-			summary_emojis.push(emoji);
-		});
-
-		const summary_label = (() => {
-			let role_index = 0;
-
-			while (role_index < roles.length) {
-				const role = roles[role_index++];
-
-				let permission_index = 0;
-
-				while (permission_index < permission_types.length) {
-					const permission_type = permission_types[permission_index++];
-					const assignment = permissions[permission_type];
-
-					if (assignment === role) {
-						return `${role} ${permission_type}`;
-					}
-				}
-			}
-
-			throw new InvariantViolation(`
-				Unable to determine minimum role permission
-			`);
-		})();
-
-		return `
-			<details class="mb-8">
-				<summary>
-					permissions
-					<span class="summary-label">
-						${summary_emojis.join('')} ${summary_label}
-					</span>
-				</summary>
-				<table>
-					<thead>
-						<tr>
-							<th>
-								operation
-							</th>
-							<th>
-								minimum required role
-							</th>
-						</tr>
-					</thead>
-					<tbody>
-						${permission_rows.join('\n')}
-					</tbody>
-				</table>
-			</details>
-		`;
-	}
-
-	private renderTimePlaceSection(block: Block): string {
-		const current_visibility = (() => {
-			if (block.show_time && block.show_place) {
-				return TimePlaceVisibility.BOTH;
-			}
-
-			if (block.show_time) {
-				return TimePlaceVisibility.TIME;
-			}
-
-			if (block.show_place) {
-				return TimePlaceVisibility.PLACE;
-			}
-
-			return TimePlaceVisibility.NONE;
-		})();
-
-		const label = getLabelForTimePlaceVisibility(current_visibility);
-		const options = serializeTimePlaceOptions(current_visibility);
-
-		return `
-			<details>
-				<summary>time and place
-					<span class="summary-label">
-						${label}
-					</span>
-				</summary>
-
-				${options}
-			</details>
-		`;
-	}
-
-	private serializeDeleteBlock(action: DeleteBlockAction): string {
-		const {path, block, editing, index_path} = action;
-		const session = this.getSession();
-		const roles = this.getRoles();
-		const account = this.getAccount();
-		const creator_username = '0xfc3';
-
-		const block_metadata = {
-			editing,
-			page_path: path,
-			// We are just displaying the single block;
-			// there's no reason to highlight it.
-			target_index: null,
-			referrer_url: null,
-			roles,
-			account,
-			index_path,
-			target_index_path: null,
-			creator_username
-		};
-
-		const factory = new BlockResultSerializerFactory(block, block_metadata, session);
-		const serializer = factory.create();
-		const serialized_block = serializer.serializeContent();
-		const block_type = 'title';
-		const created_date = createDate(block.created_at);
-		const created_timestamp = created_date.toString();
-
-		return `
-			<section>
-				<h2>really delete this block?</h2>
-
-				${serialized_block}
-
-				<section class="align-left mt-32">
-					<h4 class="mb-8">block metadata</h4>
-					<table style="font-size:75%">
-						<tbody>
-							<tr>
-								<th>
-									type
-								</th>
-								<td class="align-left">
-									${block_type}
-								</td>
-							</tr>
-
-							<tr>
-								<th>
-									created on
-								</th>
-								<td class="align-left">
-									${created_timestamp}
-								</td>
-							</tr>
-						</tbody>
-					</table>
-				</section>
-
-				<form id="deletion-form" method="post" action="/actions?editing=${editing}">
-					<input type="hidden" name="action_type" value="${ActionType.DELETE_BLOCK}" />
-					<input type="hidden" name="path" value="${path}" />
-					<input type="hidden" name="index_path" value="${index_path}" />
-
-					<table class="fixed mt-32">
-						<tbody>
-							<tr>
-								<td>
-									<a class="biglink grey" href="${path}?editing=${editing}">
-										${Emoji.LEFT_ARROW_UNICODE} cancel
-									</a>
-								</td>
-
-								<td>
-									<button class="biglink red" type="submit">
-										delete ${Emoji.RIGHT_ARROW_UNICODE}
-									</button>
-								</td>
-							</tr>
-						</tbody>
-					</table>
-				</form>
-			</section>
-		`;
-	}
-
-	private getRoles(): string[] {
-		const {roles} = this.getMetadata();
-
-		return roles;
-	}
-
-	private getAccount(): Account {
-		const {account} = this.getMetadata();
-
-		return account;
-	}
-
-	private getMetadata(): ActionMetadata {
-		return this.metadata;
-	}
-}
-
-export default ActionResultSerializer;