@servicenow/sdk-build-plugins 3.0.3 → 4.0.0

package/src/ui-action-plugin.ts

@@ -0,0 +1,324 @@
+import { CallExpressionShape, Plugin, type RecordId, type Shape, type StringShape } from '@servicenow/sdk-build-core'
+import { NowIdShape } from './now-id-plugin'
+import { ModuleFunctionShape } from './server-module-plugin'
+
+export const UiActionPlugin = Plugin.create({
+    name: 'UiActionPlugin',
+    records: {
+        sys_ui_action: {
+            relationships: {
+                sys_ui_action_role: {
+                    via: 'sys_ui_action',
+                    descendant: true,
+                    relationships: {
+                        sys_user_role: {
+                            via: 'sys_user_role',
+                            inverse: true,
+                        },
+                    },
+                },
+                sys_ui_action_view: {
+                    via: 'sys_ui_action',
+                    descendant: true,
+                    relationships: {
+                        sys_ui_view: {
+                            via: 'sys_ui_view',
+                            inverse: true,
+                        },
+                    },
+                },
+            },
+            toShape(record, { descendants }) {
+                const actionViews = descendants.query('sys_ui_action_view')
+                const excludeFrom: (RecordId | string)[] = [],
+                    includeIn: (RecordId | string)[] = []
+                for (const actionView of actionViews) {
+                    const viewName = actionView.getId().getKey('sys_ui_view')
+                    if (!viewName) {
+                        continue
+                    }
+                    const visibility = actionView.get('visibility').ifString()?.getValue()
+                    visibility === 'exclude' ? excludeFrom.push(viewName) : includeIn.push(viewName)
+                }
+                const roles = descendants.query('sys_ui_action_role').map((m2m) => m2m.get('sys_user_role'))
+                const getBoolean = (key: string): boolean | undefined => {
+                    return record.get(key)?.ifDefined()?.toBoolean().getValue()
+                }
+
+                const getString = (key: string): string | undefined => {
+                    return record.get(key)?.ifString()?.getValue()
+                }
+
+                const form = {
+                    showButton: getBoolean('form_button'),
+                    showLink: getBoolean('form_link'),
+                    showContextMenu: getBoolean('form_context_menu'),
+                    style: getString('form_style'),
+                }
+
+                const list = {
+                    showButton: getBoolean('list_button'),
+                    showLink: getBoolean('list_link'),
+                    showContextMenu: getBoolean('list_context_menu'),
+                    style: getString('list_style'),
+                    showListChoice: getBoolean('list_choice'),
+                    showBannerButton: getBoolean('list_banner_button'),
+                    showSaveWithFormButton: getBoolean('list_save_with_form_button'),
+                }
+
+                const client = {
+                    isClient: getBoolean('client'),
+                    isUi11Compatible: getBoolean('ui11_compatible'),
+                    onClick: getString('onclick'),
+                    isUi16Compatible: getBoolean('ui16_compatible'),
+                }
+
+                const workspace = {
+                    clientScriptV2: getString('client_script_v2'),
+                    showFormButtonV2: getBoolean('form_button_v2'),
+                    showFormMenuButtonV2: getBoolean('form_menu_button_v2'),
+                    isConfigurableWorkspace: getBoolean('format_for_configurable_workspace'),
+                }
+
+                // Extract messages from the record if available
+                const messages: string[] = []
+                const messagesField = record.get('messages')
+                if (messagesField?.isArray()) {
+                    const messageValues = messagesField.asArray().getValue()
+                    if (Array.isArray(messageValues)) {
+                        messageValues.forEach((msg) => {
+                            if (typeof msg === 'string') {
+                                messages.push(msg)
+                            }
+                        })
+                    }
+                } else if (messagesField?.ifString()) {
+                    // Handle messages as a string (from XML)
+                    const messageString = messagesField.ifString()?.getValue()
+                    if (messageString) {
+                        // Split by newlines and add each line as a separate message
+                        const messageLines = messageString.split('\n')
+                        messageLines.forEach((line) => {
+                            if (line.trim()) {
+                                messages.push(line)
+                            }
+                        })
+                    }
+                }
+                return {
+                    success: true,
+                    value: new CallExpressionShape({
+                        source: record,
+                        callee: 'UiAction',
+                        args: [
+                            record.transform(({ $ }) => ({
+                                $id: $.val(NowIdShape.from(record)),
+                                table: $,
+                                name: $,
+                                active: $.toBoolean().def(true),
+                                actionName: $.from('action_name').def(''),
+                                form: $.val(form).def({
+                                    showButton: false,
+                                    showLink: false,
+                                    showContextMenu: false,
+                                    style: '',
+                                }),
+                                list: $.val(list).def({
+                                    showButton: false,
+                                    showLink: false,
+                                    showContextMenu: false,
+                                    style: '',
+                                    showListChoice: false,
+                                    showBannerButton: false,
+                                    showSaveWithFormButton: false,
+                                }),
+                                client: $.val(client).def({
+                                    isClient: false,
+                                    isUi11Compatible: false,
+                                    onClick: '',
+                                    isUi16Compatible: false,
+                                }),
+                                workspace: $.val(workspace).def({
+                                    clientScriptV2: '',
+                                    showFormButtonV2: false,
+                                    showFormMenuButtonV2: false,
+                                    isConfigurableWorkspace: false,
+                                }),
+                                comments: $.def(''),
+                                messages: $.val(messages.length > 0 ? messages : []),
+                                condition: $.def(''),
+                                script: $.def(''),
+                                hint: $.def(''),
+                                order: $.map((o) => (o.ifString()?.getValue() === '' ? 100 : o))
+                                    .toNumber()
+                                    .def(100),
+                                overrides: $.def(''),
+                                showQuery: $.from('show_query').toBoolean().def(false),
+                                showUpdate: $.from('show_update').toBoolean(),
+                                showInsert: $.from('show_insert').toBoolean(),
+                                showMultipleUpdate: $.from('show_multiple_update').toBoolean().def(false),
+                                isolateScript: $.from('isolate_script').toBoolean().def(false),
+                                roles: $.val(roles).def([]),
+                                includeInViews: $.val(includeIn).def([]),
+                                excludeFromViews: $.val(excludeFrom).def([]),
+                            })),
+                        ],
+                    }),
+                }
+            },
+        },
+        sys_ui_action_role: {
+            coalesce: ['sys_ui_action', 'sys_user_role'],
+        },
+        sys_ui_action_view: {
+            coalesce: ['sys_ui_action', 'sys_ui_view'],
+        },
+    },
+    shapes: [
+        {
+            shape: CallExpressionShape,
+            fileTypes: ['fluent'],
+            async toRecord(callExpression, { diagnostics, factory }) {
+                if (callExpression.getCallee() !== 'UiAction') {
+                    return { success: false }
+                }
+
+                const arg = callExpression.getArgument(0).asObject()
+                const isClient = arg.get(['client', 'isClient'])
+
+                const uiAction = factory.createRecord({
+                    source: callExpression,
+                    table: 'sys_ui_action',
+                    explicitId: arg.get('$id'),
+                    properties: arg.transform(({ $ }) => ({
+                        name: $,
+                        table: $,
+                        action_name: $.from('actionName'),
+                        comments: $.def(''),
+                        active: $.def(true),
+                        client: $.val(isClient),
+                        onClick: $.val(arg.get(['client', 'onClick'])),
+                        messages: $.val(
+                            arg.get('messages')?.isArray()
+                                ? arg.get('messages').asArray().getValue().join('\n')
+                                : arg.get('messages')
+                        ).def([]),
+                        list_style: $.val(arg.get(['list', 'style'])),
+                        form_style: $.val(arg.get(['form', 'style'])),
+                        condition: $.def(''),
+                        script: $.map(
+                            (v) => v.if(ModuleFunctionShape)?.toString((n) => `${n}({{PARAMS}})`, ['current']) ?? v
+                        )
+                            .def('')
+                            .toCdata(),
+                        hint: $.def(''),
+                        order: $.toNumber().def(100),
+                        overrides: $.def(''),
+                        form_button: $.val(arg.get(['form', 'showButton'])).def(false),
+                        list_button: $.val(arg.get(['list', 'showButton'])).def(false),
+                        form_link: $.val(arg.get(['form', 'showLink'])).def(false),
+                        list_link: $.val(arg.get(['list', 'showLink'])).def(false),
+                        form_context_menu: $.val(arg.get(['form', 'showContextMenu'])).def(false),
+                        list_context_menu: $.val(arg.get(['list', 'showContextMenu'])).def(false),
+                        show_query: $.from('showQuery').toBoolean().def(false),
+                        show_insert: $.from('showInsert').toBoolean().def(false).def(true),
+                        show_multiple_update: $.from('showMultipleUpdate').toBoolean().def(false),
+                        show_update: $.from('showUpdate').toBoolean().def(true),
+                        list_choice: $.val(arg.get(['list', 'showListChoice'])).def(false),
+                        list_banner_button: $.val(arg.get(['list', 'showBannerButton'])).def(false),
+                        list_save_with_form_button: $.val(arg.get(['list', 'showSaveWithFormButton'])).def(false),
+                        isolate_script: $.from('isolateScript').toBoolean().def(false),
+                        ui11_compatible: $.val(arg.get(['client', 'isUi11Compatible'])).def(false),
+                        ui16_compatible: $.val(arg.get(['client', 'isUi16Compatible'])),
+                        client_script_v2: $.val(arg.get(['workspace', 'clientScriptV2'])),
+                        form_button_v2: $.val(arg.get(['workspace', 'showFormButtonV2'])).def(false),
+                        form_menu_button_v2: $.val(arg.get(['workspace', 'showFormMenuButtonV2'])).def(false),
+                        format_for_configurable_workspace: $.val(arg.get(['workspace', 'isConfigurableWorkspace'])).def(
+                            false
+                        ),
+                    })),
+                })
+                const roles = arg.get('roles').ifArray()?.getElements() ?? []
+                if (!arg.get('condition').toString().getValue().trim() && roles.length === 0) {
+                    diagnostics.warn(
+                        arg.get('roles').ifDefined() ?? arg.get('condition').ifDefined() ?? arg,
+                        'UI Actions with an empty condition and no roles defined can be called by any logged-in users. Please restrict UI actions. The condition field should be specified to restrict execution of this UI Action to certain users. For example, current.canWrite() condition restricts the UI Action to the users who can modify the current record, gs.hasRole("admin") condition restricts the UI Action to the users with admin role.'
+                    )
+                }
+
+                if (arg.get('script').is(ModuleFunctionShape) && isClient.ifBoolean()?.getValue()) {
+                    diagnostics.error(isClient, 'Module scripts (sys_module) cannot be used on client-side UI Actions')
+                }
+
+                const excludeFromViews =
+                    (arg.get('excludeFromViews').ifArray()?.getElements() as Shape<StringShape>[]) ?? []
+                const includeInViews =
+                    (arg.get('includeInViews').ifArray()?.getElements() as Shape<StringShape>[]) ?? []
+                const excludeSet = new Set(excludeFromViews.map((v) => v.getValue()))
+                includeInViews.forEach((x) => {
+                    if (excludeSet.has(x.getValue())) {
+                        diagnostics.error(
+                            arg.get('includeInViews'),
+                            'The same view should not appear in both the `excludeFromViews` and `includeInViews`'
+                        )
+                    }
+                })
+                const uiActioneViews = [
+                    ...includeInViews.map((view) =>
+                        factory.createRecord({
+                            source: callExpression,
+                            table: 'sys_ui_action_view',
+                            properties: {
+                                sys_ui_action: uiAction.getId(),
+                                visibility: 'include',
+                                sys_ui_view: factory.createReference({
+                                    source: view,
+                                    table: 'sys_ui_view',
+                                    keys: { name: view },
+                                }),
+                            },
+                        })
+                    ),
+                    ...excludeFromViews.map((view) =>
+                        factory.createRecord({
+                            source: callExpression,
+                            table: 'sys_ui_action_view',
+                            properties: {
+                                sys_ui_action: uiAction.getId(),
+                                visibility: 'exclude',
+                                sys_ui_view: factory.createReference({
+                                    source: view,
+                                    table: 'sys_ui_view',
+                                    keys: { name: view },
+                                }),
+                            },
+                        })
+                    ),
+                ]
+                return {
+                    success: true,
+                    value: uiAction.with(
+                        ...roles.map((role) =>
+                            factory.createRecord({
+                                source: callExpression,
+                                table: 'sys_ui_action_role',
+                                properties: {
+                                    sys_ui_action: uiAction.getId(),
+                                    sys_user_role:
+                                        role.ifString()?.pipe((roleName) =>
+                                            factory.createReference({
+                                                source: roleName,
+                                                table: 'sys_user_role',
+                                                keys: { name: roleName },
+                                            })
+                                        ) ?? role,
+                                },
+                            })
+                        ),
+                        ...uiActioneViews
+                    ),
+                }
+            },
+        },
+    ],
+})

package/src/ui-page-plugin.ts

@@ -0,0 +1,168 @@
+import { CallExpressionShape, Plugin } from '@servicenow/sdk-build-core'
+import { isSNScope } from '@servicenow/sdk-build-core'
+import { XMLParser, XMLBuilder, type X2jOptions, type XmlBuilderOptions } from 'fast-xml-parser'
+import { NowIdShape } from './now-id-plugin'
+
+const parserOptions: X2jOptions = {
+    ignoreAttributes: false,
+    alwaysCreateTextNode: true,
+    htmlEntities: true,
+    preserveOrder: true,
+    attributeNamePrefix: '@_',
+    commentPropName: '@_comment',
+    processEntities: false,
+}
+
+const builderOptions: XmlBuilderOptions = {
+    ignoreAttributes: false,
+    preserveOrder: true,
+    attributeNamePrefix: '@_',
+    commentPropName: '@_comment',
+    format: true,
+    processEntities: true,
+    // A valid but undocumented option
+    // https://github.com/NaturalIntelligence/fast-xml-parser/blob/master/src/xmlbuilder/json2xml.js#L26
+    // @ts-ignore
+    entities: [
+        // Match on &, &test, but not &, <, >, ', and "
+        // See: https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references#Standard_public_entity_sets_for_characters for the list of default XML entities
+        { regex: /&(?!(amp;|lt;|gt;|apos;|quot;))/g, val: '$[AMP]' },
+    ],
+}
+
+const POLARIS_APPSHELL_THEME_ID = 'c86a62e2c7022010099a308dc7c26022'
+
+const parser = new XMLParser(parserOptions)
+
+// TODO: Remove this shim tag once we've shipped Glide support for this feature.
+const nowUxGlobals = (themeId: string = POLARIS_APPSHELL_THEME_ID) => {
+    return parser.parse(`<!-- @sdk:now-ux-globals -->
+<!-- Resolved from sdk:now-ux-globals tag at NowSDK build time to support earlier Glide releases -->
+<script>
+window.NOW = {};
+window.NOW.user = {};
+window.NOW.batch_glide_ajax_requests = false;
+window.g_ck = "$[gs.getSession().getSessionToken()]";
+</script>
+<!-- Include ServiceNow's required scripts -->
+<g:requires name="scripts/doctype/functions_bootstrap14.js" />
+<g:requires name="scripts/lib/prototype.js" />
+<g:requires name="scripts/classes/ajax/GlideURL.js" />
+<g:requires name="scripts/doctype/CustomEventManager.js" />
+<g:requires name="scripts/classes/ajax/GlideAjax.js" />
+<g:requires name="scripts/classes/GlideUser.js" />
+<g2:client_script type="user" />
+<link rel="preload" href="/uxasset/set-cache-buster/$[UxFrameworkScriptables.getFlushTimestamp()].js" as="script"></link>
+<link data-source-id="glide-theme" rel="stylesheet" href="/$uxappimmutables.do?sysparm_request_type=ux_theme$[AMP]sysparm_app_sys_id=${themeId}$[AMP]uxpcb=$[UxFrameworkScriptables.getFlushTimestamp()]"></link>
+<script type="module" src="/uxasset/externals/@devsnc/library-uxf/index.jsdbx"></script>
+<!-- @sdk:now-ux-globals -->
+`)
+}
+
+/**
+ * Allows us to replace some tags at build time for an improved authoring experience.
+ * These are tags that should eventually be supported natively by Glide. These tags
+ * should resolve to behavior that will work on earlier versions of Glide in lieu
+ * of platform support.
+ * @param nodes - parsed XML nodes
+ * @returns - parsed XML nodes and any replacements of synthetic tags
+ */
+const nodeTransformer = (nodes: any[]) => {
+    for (let i = 0; i < nodes.length; i++) {
+        const node = nodes[i]
+        const tag = Object.keys(node)[0]!
+        if (tag === 'sdk:now-ux-globals') {
+            const themeId = node[':@']?.['@_theme-id']
+            nodes.splice(i, 1, ...nowUxGlobals(themeId))
+            continue
+        }
+        const body = node[tag]
+        if (Array.isArray(body)) {
+            node[tag] = nodeTransformer(body)
+        }
+    }
+    return nodes
+}
+
+export const UiPagePlugin = Plugin.create({
+    name: 'UiPagePlugin',
+    records: {
+        sys_ui_page: {
+            toShape(record) {
+                return {
+                    success: true,
+                    value: new CallExpressionShape({
+                        source: record,
+                        callee: 'UiPage',
+                        args: [
+                            record.transform(({ $ }) => ({
+                                $id: $.val(NowIdShape.from(record)),
+                                category: $.def(''),
+                                endpoint: $,
+                                description: $.def(''),
+                                direct: $.toBoolean().def(false),
+                                html: $.def(''),
+                                clientScript: $.from('client_script').def(''),
+                                processingScript: $.from('processing_script').def(''),
+                            })),
+                        ],
+                    }),
+                }
+            },
+        },
+    },
+    shapes: [
+        {
+            shape: CallExpressionShape,
+            fileTypes: ['fluent'],
+            async toRecord(callExpression, { config, factory, diagnostics }) {
+                if (callExpression.getCallee() !== 'UiPage') {
+                    return { success: false }
+                }
+
+                const arg = callExpression.getArgument(0).asObject()
+                const endpoint = arg.get('endpoint').asString()
+                const scope = config.scope
+                if (scope !== 'global' && !isSNScope(scope) && !endpoint.getValue().startsWith(`${scope}_`)) {
+                    diagnostics.error(endpoint.getOriginalNode(), `endpoint must begin with '${scope}_'`)
+                    return { success: false }
+                }
+                const name = endpoint.asString().getValue().replace(`${scope}_`, '').replace(/\.do$/, '')
+                let html = arg.get('html').toString().getValue()
+                if (html) {
+                    try {
+                        const nodes = parser.parse(html)
+                        const transformed = nodeTransformer(nodes)
+                        html = new XMLBuilder(builderOptions).build(transformed)
+                    } catch (error: unknown) {
+                        if (error instanceof Error) {
+                            diagnostics.error(arg.get('html'), error.message)
+                        } else {
+                            diagnostics.error(arg.get('html'), `html must be valid`)
+                        }
+                        return { success: false }
+                    }
+                }
+
+                return {
+                    success: true,
+                    value: factory.createRecord({
+                        source: callExpression,
+                        table: 'sys_ui_page',
+                        explicitId: arg.get('$id'),
+                        properties: arg.transform(({ $ }) => ({
+                            name: $.val(name),
+                            endpoint: $.val(endpoint),
+                            description: $,
+                            direct: $.def(false),
+                            category: $,
+                            html: $.val(html).toCdata(),
+                            client_script: $.from('clientScript').toCdata(),
+                            processing_script: $.from('processingScript').toCdata(),
+                        })),
+                    }),
+                }
+            },
+        },
+    ],
+})

package/src/user-preference-plugin.ts

@@ -0,0 +1,62 @@
+import { CallExpressionShape, Plugin } from '@servicenow/sdk-build-core'
+import { NowIdShape } from './now-id-plugin'
+
+/**
+ * Creates a User Preference (sys_user_preference).
+ *
+ * @see https://docs.servicenow.com/csh?topicname=c_UserPreferences.html&version=latest
+ *
+ * @param config - an object containing the following properties:
+ *   * **$id** - unique id for the record, typically using `Now.ID["value"]`
+ *   * **name** - name of the feature or functionality
+ *   * **type** - the data type of entry accepted for the `value`
+ *   * **value** - current setting for this record
+ *   * **description**? - short description of the feature or functionality
+ *   * **system**? - whether this record indicates the system-wide default
+ */
+export const UserPreferencePlugin = Plugin.create({
+    name: 'UserPreferencePlugin',
+    records: {
+        sys_user_preference: {
+            toShape(record) {
+                return {
+                    success: true,
+                    value: new CallExpressionShape({
+                        source: record,
+                        callee: 'UserPreference',
+                        args: [
+                            record.transform(({ $, merge }) => ({
+                                $id: $.val(NowIdShape.from(record)),
+                                system: $.from('system').toBoolean(),
+                                [merge]: $,
+                            })),
+                        ],
+                    }),
+                }
+            },
+        },
+    },
+    shapes: [
+        {
+            shape: CallExpressionShape,
+            fileTypes: ['fluent'],
+            toRecord(callExpression, { factory }) {
+                if (callExpression.getCallee() !== 'UserPreference') {
+                    return { success: false }
+                }
+
+                const pref = callExpression.getArgument(0).asObject()
+
+                return {
+                    success: true,
+                    value: factory.createRecord({
+                        source: callExpression,
+                        table: 'sys_user_preference',
+                        explicitId: pref.get('$id'),
+                        properties: pref.pick(['name', 'type', 'value', 'description', 'system']),
+                    }),
+                }
+            },
+        },
+    ],
+})

package/src/utils.ts

@@ -0,0 +1,69 @@
+import { ts, type Shape, type ObjectShape, type Diagnostics } from '@servicenow/sdk-build-core'
+
+export function toReference(shape: Shape) {
+    return shape.ifRecord()?.getId() ?? shape.ifString()?.getValue() ?? ''
+}
+
+/**
+ * Reverses an object, swapping keys and values. **reverseObject** should only be used
+ * where the key/values are all known ahead of time and the values are unique.
+ * @example
+ * reverseObject({ a: 'foo', b: 'bar' }) // { foo: 'a', bar: 'b' }
+ */
+export function reverseObject<K extends string, V extends string>(obj: Record<K, V>) {
+    const reversed = {} as Record<V, K>
+    for (const key in obj) {
+        const value = obj[key]
+        if (typeof value === 'string') {
+            reversed[value] = key
+        }
+    }
+    return reversed
+}
+
+export function noThrow<T>(action: () => T) {
+    try {
+        return action()
+    } catch (error) {
+        return error as Error
+    }
+}
+
+/**
+ * Regex taken from: https://github.com/oozcitak/xmlbuilder-js/blob/b20136cd1591d0f17ab2f184053c7150150428b2/src/XMLStringifier.coffee#L119C15-L119C127
+ */
+export const INVALID_XML_CHARACTERS =
+    // biome-ignore lint/suspicious/noControlCharactersInRegex: This is intentional
+    /[\0-\x08\x0B\f\x0E-\x1F\uFFFE\uFFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF]/g
+
+export function applyPathMappings(path: string, mappings: Record<string, string>) {
+    if (!mappings) {
+        return path
+    }
+    // TODO: Naive implementation for now that just supports simple patterns. We can explore supporting more complex patterns later.
+    for (const [source, target] of Object.entries(mappings)) {
+        const match = path.match(`${source.replace(/\./, '\\.').replace(/\*+/, '(.*)')}$`)?.[1]
+        if (match !== undefined) {
+            return target.replace(/\*+/, match)
+        }
+    }
+    return path
+}
+
+export function getCallExpressionName(node: ts.CallExpression) {
+    const expression = node.getExpression()
+    if (ts.Node.isIdentifier(expression) || ts.Node.isPropertyAccessExpression(expression)) {
+        return expression.getText()
+    }
+
+    throw `CallExpression does not have a name: ${expression.getText()}`
+}
+
+export function generateDeprecatedDiagnostics(object: ObjectShape, diagnostics: Diagnostics): void {
+    Object.keys(object.getAliasedKeys()).forEach((key) => {
+        const alias = object.findAliasUsed(key)
+        if (alias) {
+            diagnostics.hint(object.get(key), `The property '${alias}' is deprecated, use '${key}' instead.`)
+        }
+    })
+}

package/src/view-plugin.ts

@@ -0,0 +1,46 @@
+import { Plugin, Record, RecordId, Shape } from '@servicenow/sdk-build-core'
+
+export const ViewPlugin = Plugin.create({
+    name: 'ViewPlugin',
+    records: {
+        sys_ui_view: {
+            coalesce: ['name'],
+        },
+    },
+    shapes: [
+        {
+            shape: Record,
+            inspect(record, { diagnostics }) {
+                if (record.getTable() !== 'sys_ui_view') {
+                    return
+                }
+
+                if (record.get('title').equals('Default view')) {
+                    // The default view's name will be empty, so skip the validation
+                    return
+                }
+
+                const viewName = record.get('name')
+                if (!viewName.isString() || !/^[a-zA-Z0-9_]+$/.test(viewName.getValue())) {
+                    diagnostics.error(viewName.getOriginalNode(), `View name can only contain alphanumeric characters`)
+                }
+            },
+        },
+        {
+            shape: RecordId,
+            async commit(id, target, { commit }) {
+                if (id.getTable() !== 'sys_ui_view') {
+                    return { success: false }
+                }
+
+                const viewName = id.getKey('name')
+                if (!viewName) {
+                    return { success: false }
+                }
+
+                await commit(Shape.from(id, viewName).asString(), target)
+                return { success: true }
+            },
+        },
+    ],
+})