@jskit-ai/users-web 0.1.35 → 0.1.37

package/src/client/composables/useAddEdit.js

@@ -14,6 +14,7 @@ import {
 import {
   resolveResourceMessages
 } from "./scopeHelpers.js";
+import { resolveRouteParamNamesInOrder } from "./routeTemplateHelpers.js";
 
 function useAddEdit({
   ownershipFilter = USERS_ROUTE_VISIBILITY_WORKSPACE,
@@ -53,6 +54,7 @@ function useAddEdit({
   const addEditUiRuntime = createAddEditUiRuntime({
     recordIdParam,
     routeParams: routeParams ?? computed(() => route?.params || {}),
+    routeParamNames: computed(() => resolveRouteParamNamesInOrder(route)),
     routePath: computed(() => route?.path || ""),
     routeRecordId,
     apiUrlTemplate,
@@ -134,6 +136,12 @@ function useAddEdit({
   const isInitialLoading = operationScope.isLoading(endpointResource.isInitialLoading);
   const isFetching = operationScope.isLoading(endpointResource.isFetching);
   const isRefetching = computed(() => Boolean(isFetching.value && !isInitialLoading.value));
+  const isFieldLocked = computed(() =>
+    Boolean(!canSave.value || addEdit.saving.value || isRefetching.value)
+  );
+  const isSubmitDisabled = computed(() =>
+    Boolean(isInitialLoading.value || isRefetching.value || !canSave.value)
+  );
   const loadError = operationScope.loadError(endpointResource.loadError);
   const isLoading = operationScope.isLoading(endpointResource.isLoading);
   setupOperationErrorReporting({
@@ -148,6 +156,8 @@ function useAddEdit({
     isInitialLoading,
     isFetching,
     isRefetching,
+    isFieldLocked,
+    isSubmitDisabled,
     isLoading,
     isSaving: addEdit.saving,
     fieldErrors: addEdit.fieldErrors,

package/src/client/composables/useList.js

@@ -1,4 +1,5 @@
 import { computed, onScopeDispose, proxyRefs, ref, watch } from "vue";
+import { useRouter } from "vue-router";
 import { appendQueryString } from "@jskit-ai/kernel/shared/support";
 import { normalizeText } from "@jskit-ai/kernel/shared/support/normalize";
 import { resolveCrudLookupFieldKeys } from "@jskit-ai/kernel/shared/support/crudLookup";
@@ -7,10 +8,23 @@ import { useListCore } from "./useListCore.js";
 import { resolveOperationAdapter } from "./operationAdapters.js";
 import { setupOperationErrorReporting } from "./operationUiHelpers.js";
 import { createListUiRuntime } from "./listUiRuntime.js";
+import { asPlainObject } from "./scopeHelpers.js";
 import {
   normalizeListSearchConfig,
   matchesLocalSearch
 } from "./listSearchSupport.js";
+import {
+  normalizeListSyncToRouteConfig,
+  resolveQueryParamDescriptors,
+  resolveActiveQueryParamEntries,
+  resolveWritableQueryParamBindings,
+  buildQueryParamEntriesToken,
+  parseRouteBindingValue,
+  areQueryParamBindingValuesEqual,
+  buildRouteQueryCompareToken,
+  mergeManagedQueryParamKeyHistory,
+  resolveRouteSyncManagedKeys
+} from "./listQueryParamSupport.js";
 import { resolveLookupFieldDisplayValue } from "./crudLookupFieldLabelSupport.js";
 import {
   resolveRouteParamNamesInOrder,
@@ -18,6 +32,8 @@ import {
   toRouteParamValue
 } from "./routeTemplateHelpers.js";
 
+const EMPTY_ROUTE_SYNC_QUERY_PARAM_BLACKLIST = Object.freeze([]);
+
 function useList({
   ownershipFilter = USERS_ROUTE_VISIBILITY_WORKSPACE,
   surfaceId = "",
@@ -40,9 +56,15 @@ function useList({
   recordIdSelector = null,
   viewUrlTemplate = "",
   editUrlTemplate = "",
-  search = null
+  search = null,
+  queryParams = null,
+  syncToRoute = false
 } = {}) {
   const searchConfig = normalizeListSearchConfig(search);
+  const routeSyncConfig = normalizeListSyncToRouteConfig(syncToRoute, {
+    defaultSearchParam: searchConfig.queryParam
+  });
+  const router = routeSyncConfig.enabled === true ? useRouter() : null;
   const searchQuery = ref(searchConfig.initialQuery);
   const debouncedSearchQuery = ref(searchConfig.initialQuery);
   let searchDebounceTimer = null;
@@ -90,7 +112,46 @@ function useList({
     },
     realtime
   });
+  if (
+    routeSyncConfig.enabled === true &&
+    routeSyncConfig.hydrateFromRoute === true &&
+    routeSyncConfig.syncSearch === true &&
+    searchConfig.enabled === true
+  ) {
+    const routeQuerySource = asPlainObject(operationScope.routeContext.route?.query || {});
+    const routeSearchValue = routeQuerySource[routeSyncConfig.searchParam];
+    const hydratedSearch = normalizeText(Array.isArray(routeSearchValue) ? routeSearchValue[0] : routeSearchValue);
+
+    if (searchDebounceTimer) {
+      clearTimeout(searchDebounceTimer);
+      searchDebounceTimer = null;
+    }
+
+    searchQuery.value = hydratedSearch;
+    debouncedSearchQuery.value = hydratedSearch;
+    isSearchDebouncing.value = false;
+  }
   const canView = operationScope.permissionGate("view");
+  const queryParamsContext = computed(() => {
+    return Object.freeze({
+      surfaceId: operationScope.routeContext.currentSurfaceId.value,
+      workspaceSlug: operationScope.workspaceSlugFromRoute.value,
+      ownershipFilter: operationScope.normalizedOwnershipFilter
+    });
+  });
+  const queryParamDescriptors = computed(() => {
+    return resolveQueryParamDescriptors(queryParams, queryParamsContext.value);
+  });
+  const declaredQueryParamKeys = computed(() => {
+    return queryParamDescriptors.value.map((descriptor) => descriptor.key);
+  });
+  const activeQueryParamEntries = computed(() => {
+    return resolveActiveQueryParamEntries(queryParamDescriptors.value);
+  });
+  const activeQueryParamsToken = computed(() => buildQueryParamEntriesToken(activeQueryParamEntries.value));
+  const writableQueryParamBindings = computed(() => {
+    return resolveWritableQueryParamBindings(queryParamDescriptors.value);
+  });
   const parentRouteFilter = computed(() => {
     const lookupFieldKeys = resolveCrudLookupFieldKeys(resource);
     if (lookupFieldKeys.length < 1) {
@@ -157,6 +218,12 @@ function useList({
       searchParams.set(parentFilter.key, parentFilter.value);
     }
 
+    for (const entry of activeQueryParamEntries.value) {
+      for (const value of entry.values) {
+        searchParams.append(entry.key, value);
+      }
+    }
+
     const serializedSearch = searchParams.toString();
     if (!serializedSearch) {
       return basePath;
@@ -178,6 +245,9 @@ function useList({
     if (querySearchEnabled.value) {
       baseQueryKey.push("__search__", searchConfig.queryParam, activeSearchQuery.value);
     }
+    if (activeQueryParamsToken.value) {
+      baseQueryKey.push("__query__", activeQueryParamsToken.value);
+    }
     return baseQueryKey;
   });
 
@@ -192,6 +262,174 @@ function useList({
     queryOptions,
     fallbackLoadError
   });
+  const routeSyncHydrated = ref(routeSyncConfig.enabled !== true);
+  const routeSyncApplying = ref(false);
+  const routeSyncManagedKeyHistory = ref([]);
+  const routeSyncQueryParamBlacklist = computed(() => {
+    if (routeSyncConfig.enabled !== true || routeSyncConfig.syncQueryParams !== true) {
+      return EMPTY_ROUTE_SYNC_QUERY_PARAM_BLACKLIST;
+    }
+    return routeSyncConfig.queryParamBlacklist;
+  });
+  const routeSyncQueryParamBlacklistSet = computed(() => {
+    return new Set(routeSyncQueryParamBlacklist.value);
+  });
+  if (routeSyncConfig.enabled === true && routeSyncConfig.syncQueryParams === true) {
+    watch(declaredQueryParamKeys, (nextKeys) => {
+      routeSyncManagedKeyHistory.value = mergeManagedQueryParamKeyHistory(
+        routeSyncManagedKeyHistory.value,
+        nextKeys
+      );
+    }, { immediate: true });
+  }
+  const routeSyncManagedKeys = computed(() => {
+    const managedKeys = resolveRouteSyncManagedKeys({
+      searchEnabled: searchConfig.enabled,
+      searchParam: routeSyncConfig.searchParam,
+      syncSearch: routeSyncConfig.enabled === true && routeSyncConfig.syncSearch === true,
+      syncQueryParams: routeSyncConfig.enabled === true && routeSyncConfig.syncQueryParams === true,
+      declaredKeys: declaredQueryParamKeys.value,
+      keyHistory: routeSyncManagedKeyHistory.value
+    });
+    if (routeSyncConfig.enabled !== true || routeSyncConfig.syncQueryParams !== true) {
+      return managedKeys;
+    }
+
+    const output = new Set(managedKeys);
+    for (const key of routeSyncQueryParamBlacklist.value) {
+      output.add(key);
+    }
+    return [...output].sort((left, right) => left.localeCompare(right));
+  });
+  const routeSyncDesiredQuery = computed(() => {
+    if (routeSyncConfig.enabled !== true) {
+      return {};
+    }
+
+    const desiredQuery = {};
+    if (routeSyncConfig.syncSearch === true && searchConfig.enabled === true) {
+      const normalizedSearch = normalizeText(searchQuery.value);
+      if (normalizedSearch) {
+        desiredQuery[routeSyncConfig.searchParam] = normalizedSearch;
+      }
+    }
+    if (routeSyncConfig.syncQueryParams === true) {
+      for (const entry of activeQueryParamEntries.value) {
+        if (routeSyncQueryParamBlacklistSet.value.has(entry.key)) {
+          continue;
+        }
+        if (entry.values.length === 1) {
+          desiredQuery[entry.key] = entry.values[0];
+          continue;
+        }
+        desiredQuery[entry.key] = [...entry.values];
+      }
+    }
+
+    return desiredQuery;
+  });
+  if (routeSyncConfig.enabled === true) {
+    watch(
+      () => operationScope.routeContext.route?.query || {},
+      (routeQuery) => {
+        if (routeSyncConfig.hydrateFromRoute !== true || routeSyncApplying.value === true) {
+          routeSyncHydrated.value = true;
+          return;
+        }
+
+        const routeQuerySource = asPlainObject(routeQuery);
+        if (routeSyncConfig.syncSearch === true && searchConfig.enabled === true) {
+          const routeSearchValue = routeQuerySource[routeSyncConfig.searchParam];
+          const nextSearch = normalizeText(Array.isArray(routeSearchValue) ? routeSearchValue[0] : routeSearchValue);
+          if (nextSearch !== searchQuery.value) {
+            searchQuery.value = nextSearch;
+          }
+        }
+        if (routeSyncConfig.syncQueryParams === true) {
+          for (const binding of writableQueryParamBindings.value) {
+            if (routeSyncQueryParamBlacklistSet.value.has(binding.key)) {
+              continue;
+            }
+            const nextValue = parseRouteBindingValue(binding, routeQuerySource[binding.key]);
+            const currentValue = typeof binding.get === "function" ? binding.get() : undefined;
+            if (areQueryParamBindingValuesEqual(currentValue, nextValue)) {
+              continue;
+            }
+            try {
+              binding.set(nextValue);
+            } catch {
+              // Ignore non-writable query param bindings.
+            }
+          }
+        }
+
+        routeSyncHydrated.value = true;
+      },
+      {
+        immediate: true
+      }
+    );
+
+    watch(
+      [routeSyncDesiredQuery, routeSyncManagedKeys],
+      async ([desiredQuery, managedKeys]) => {
+        if (routeSyncHydrated.value !== true || routeSyncApplying.value === true) {
+          return;
+        }
+
+        const managedKeySet = new Set(Array.isArray(managedKeys) ? managedKeys : []);
+        const currentQuery = asPlainObject(operationScope.routeContext.route?.query || {});
+        const nextQuery = {};
+
+        for (const [key, value] of Object.entries(currentQuery)) {
+          if (managedKeySet.has(key)) {
+            continue;
+          }
+          nextQuery[key] = value;
+        }
+        for (const [key, value] of Object.entries(asPlainObject(desiredQuery))) {
+          nextQuery[key] = value;
+        }
+
+        if (buildRouteQueryCompareToken(currentQuery) === buildRouteQueryCompareToken(nextQuery)) {
+          return;
+        }
+
+        routeSyncApplying.value = true;
+        try {
+          if (routeSyncConfig.mode === "push") {
+            await router.push({
+              query: nextQuery
+            });
+          } else {
+            await router.replace({
+              query: nextQuery
+            });
+          }
+        } finally {
+          routeSyncApplying.value = false;
+        }
+      }
+    );
+  }
+
+  watch(activeSearchQuery, (nextValue, previousValue) => {
+    if (!querySearchEnabled.value) {
+      return;
+    }
+    if (nextValue === previousValue) {
+      return;
+    }
+
+    list.trimToFirstPage();
+  });
+  watch(activeQueryParamsToken, (nextValue, previousValue) => {
+    if (nextValue === previousValue) {
+      return;
+    }
+
+    list.trimToFirstPage();
+  });
   const filteredItems = computed(() => {
     const sourceItems = Array.isArray(list.items.value) ? list.items.value : [];
     if (searchConfig.enabled !== true || searchConfig.mode !== "local") {
@@ -217,6 +455,7 @@ function useList({
     recordIdParam,
     recordIdSelector,
     routeParams: computed(() => operationScope.routeContext.route?.params || {}),
+    routeParamNames: computed(() => resolveRouteParamNamesInOrder(operationScope.routeContext.route)),
     routePath: computed(() => operationScope.routeContext.route?.path || ""),
     viewUrlTemplate,
     editUrlTemplate
@@ -261,7 +500,8 @@ function useList({
     searchQuery,
     searchLabel: searchConfig.label,
     searchPlaceholder: searchConfig.placeholder,
-    isSearchDebouncing
+    isSearchDebouncing,
+    activeQueryParamsToken
   });
 }
 

package/src/client/composables/usePagedCollection.js

@@ -1,5 +1,5 @@
-import { computed } from "vue";
-import { useInfiniteQuery } from "@tanstack/vue-query";
+import { computed, unref } from "vue";
+import { useInfiniteQuery, useQueryClient } from "@tanstack/vue-query";
 import { asPlainObject } from "./scopeHelpers.js";
 import { resolveEnabledRef } from "./refValueHelpers.js";
 import { toQueryErrorMessage } from "./errorMessageHelpers.js";
@@ -12,6 +12,42 @@ function defaultGetNextPageParam(lastPage) {
   return lastPage?.nextCursor ?? null;
 }
 
+function normalizeQueryKeyValue(queryKey = null) {
+  const resolved = unref(queryKey);
+  if (Array.isArray(resolved)) {
+    return resolved;
+  }
+  if (resolved === null || resolved === undefined || resolved === "") {
+    return [];
+  }
+
+  return [resolved];
+}
+
+function trimInfinitePagesToFirst(data = null) {
+  if (!data || typeof data !== "object" || Array.isArray(data)) {
+    return data;
+  }
+
+  const sourcePages = Array.isArray(data.pages) ? data.pages : [];
+  const sourcePageParams = Array.isArray(data.pageParams) ? data.pageParams : [];
+  if (sourcePages.length < 2 && sourcePageParams.length < 2) {
+    return data;
+  }
+  const pages = sourcePages.slice(0, 1);
+  const pageParams = sourcePageParams.length > 0
+    ? sourcePageParams.slice(0, 1)
+    : pages.length > 0
+      ? [null]
+      : [];
+
+  return {
+    ...data,
+    pages,
+    pageParams
+  };
+}
+
 function usePagedCollection({
   queryKey,
   enabled = true,
@@ -36,7 +72,9 @@ function usePagedCollection({
     throw new TypeError("usePagedCollection dedupeBy must be a function when provided.");
   }
 
+  const queryClient = useQueryClient();
   const queryEnabled = computed(() => resolveEnabledRef(enabled));
+  const normalizedQueryKey = computed(() => normalizeQueryKeyValue(queryKey));
 
   const query = useInfiniteQuery({
     queryKey,
@@ -106,6 +144,15 @@ function usePagedCollection({
     return query.fetchNextPage();
   }
 
+  function trimToFirstPage() {
+    const key = normalizedQueryKey.value;
+    if (key.length < 1) {
+      return;
+    }
+
+    queryClient.setQueryData(key, (data) => trimInfinitePagesToFirst(data));
+  }
+
   return Object.freeze({
     query,
     pages,
@@ -118,8 +165,12 @@ function usePagedCollection({
     hasMore,
     loadError,
     reload,
-    loadMore
+    loadMore,
+    trimToFirstPage
   });
 }
 
-export { usePagedCollection };
+export {
+  usePagedCollection,
+  trimInfinitePagesToFirst
+};

package/src/client/composables/useView.js

@@ -6,7 +6,8 @@ import { useEndpointResource } from "./useEndpointResource.js";
 import { resolveOperationAdapter } from "./operationAdapters.js";
 import { setupOperationErrorReporting } from "./operationUiHelpers.js";
 import { createViewUiRuntime } from "./viewUiRuntime.js";
-import { resolveLookupFieldDisplayValue } from "./crudLookupFieldLabelSupport.js";
+import { resolveLookupFieldDisplayValue, resolveRecordTitle } from "./crudLookupFieldLabelSupport.js";
+import { resolveRouteParamNamesInOrder } from "./routeTemplateHelpers.js";
 
 function useView({
   ownershipFilter = USERS_ROUTE_VISIBILITY_WORKSPACE,
@@ -37,6 +38,7 @@ function useView({
   const viewUiRuntime = createViewUiRuntime({
     recordIdParam,
     routeParams: routeParams ?? computed(() => route?.params || {}),
+    routeParamNames: computed(() => resolveRouteParamNamesInOrder(route)),
     routePath: computed(() => route?.path || ""),
     routeRecordId,
     apiUrlTemplate,
@@ -114,6 +116,7 @@ function useView({
     editUrl: viewUiRuntime.editUrl,
     resolveParams: viewUiRuntime.resolveParams,
     resolveFieldDisplay: resolveLookupFieldDisplayValue,
+    resolveRecordTitle,
     canView,
     isLoading,
     isFetching,

package/src/client/composables/viewUiRuntime.js

@@ -3,7 +3,7 @@ import { asPlainObject } from "./scopeHelpers.js";
 import {
   normalizeRouteParamName,
   resolveRouteParamsSource,
-  resolveRoutePathnameSource,
+  resolveScopedRoutePathname,
   resolveRouteTemplateLocation,
   toRouteParamValue
 } from "./routeTemplateHelpers.js";
@@ -22,6 +22,7 @@ function resolveRecordId({ routeParams, recordIdParam, routeRecordId }) {
 function createViewUiRuntime({
   recordIdParam = "recordId",
   routeParams = null,
+  routeParamNames = null,
   routePath = "",
   routeRecordId = null,
   apiUrlTemplate = "",
@@ -53,10 +54,18 @@ function createViewUiRuntime({
         routeRecordId
       });
     sourceParams[normalizedRecordIdParam] = resolvedRecordId;
+    const currentPathname = resolveScopedRoutePathname({
+      currentPathname: routePath,
+      params: currentRouteParams,
+      orderedParamNames: routeParamNames,
+      anchorParamName: normalizedRecordIdParam,
+      anchorParamValue: resolvedRecordId,
+      anchorMode: "at"
+    });
 
     return resolveRouteTemplateLocation(normalizedTemplate, {
       params: sourceParams,
-      currentPathname: resolveRoutePathnameSource(routePath)
+      currentPathname
     });
   }
 

package/src/client/lib/bootstrap.js

@@ -30,7 +30,7 @@ function normalizeWorkspaceEntry(entry) {
     surfaceColor: String(entry.surfaceColor || "").trim(),
     surfaceVariantColor: String(entry.surfaceVariantColor || "").trim(),
     avatarUrl: String(entry.avatarUrl || "").trim(),
-    roleId: String(entry.roleId || "member").trim().toLowerCase() || "member",
+    roleSid: String(entry.roleSid || "member").trim().toLowerCase() || "member",
     isAccessible: entry.isAccessible !== false
   });
 }

package/src/client/lib/menuIcons.js

@@ -1,3 +1,4 @@
+import * as mdiIcons from "@mdi/js";
 import {
   mdiAccountCircleOutline,
   mdiAccountCogOutline,
@@ -26,6 +27,26 @@ const SURFACE_SWITCH_ICON_BY_ID = Object.freeze({
   console: mdiConsoleNetworkOutline
 });
 
+function resolveExplicitIconValue(explicitIcon = "") {
+  const normalizedExplicitIcon = normalizeText(explicitIcon);
+  if (!normalizedExplicitIcon) {
+    return "";
+  }
+
+  if (!normalizedExplicitIcon.startsWith("mdi-")) {
+    return normalizedExplicitIcon;
+  }
+
+  const iconKey = normalizedExplicitIcon
+    .slice("mdi-".length)
+    .split("-")
+    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+    .join("");
+  const exportName = `mdi${iconKey}`;
+  const resolvedIcon = mdiIcons[exportName];
+  return typeof resolvedIcon === "string" && resolvedIcon ? resolvedIcon : normalizedExplicitIcon;
+}
+
 function normalizePathname(value) {
   const normalizedValue = normalizeText(value);
   if (!normalizedValue) {
@@ -70,9 +91,9 @@ function resolveSurfaceSwitchIdFromLabel(label = "") {
 }
 
 function resolveSurfaceSwitchIcon(surfaceId = "", explicitIcon = "") {
-  const normalizedExplicitIcon = normalizeText(explicitIcon);
-  if (normalizedExplicitIcon) {
-    return normalizedExplicitIcon;
+  const resolvedExplicitIcon = resolveExplicitIconValue(explicitIcon);
+  if (resolvedExplicitIcon) {
+    return resolvedExplicitIcon;
   }
 
   const normalizedSurfaceId = normalizeText(surfaceId).toLowerCase();
@@ -80,9 +101,9 @@ function resolveSurfaceSwitchIcon(surfaceId = "", explicitIcon = "") {
 }
 
 function resolveMenuLinkIcon({ icon = "", label = "", to = "" } = {}) {
-  const normalizedIcon = normalizeText(icon);
-  if (normalizedIcon) {
-    return normalizedIcon;
+  const resolvedExplicitIcon = resolveExplicitIconValue(icon);
+  if (resolvedExplicitIcon) {
+    return resolvedExplicitIcon;
   }
 
   const normalizedLabel = normalizeText(label).toLowerCase();

package/templates/src/components/WorkspaceNotFoundCard.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { mdiAlertCircleOutline } from "@mdi/js";
 import { computed } from "vue";
 
 const props = defineProps({
@@ -20,7 +21,7 @@ const normalizedMessage = computed(() => String(props.message || "").trim() || "
   <v-card rounded="lg" elevation="1" border>
     <v-card-item>
       <template #prepend>
-        <v-icon icon="mdi-alert-circle-outline" color="error" />
+        <v-icon :icon="mdiAlertCircleOutline" color="error" />
       </template>
       <v-card-title class="text-h5">Unavailable</v-card-title>
       <v-card-subtitle>{{ normalizedSurfaceLabel }} surface.</v-card-subtitle>

package/templates/src/components/account/settings/AccountSettingsInvitesSection.vue

@@ -33,7 +33,7 @@ const invites = props.runtime.invites;
             v-for="invite in invites.items.value"
             :key="invite.id"
             :title="invite.workspaceName"
-            :subtitle="`/${invite.workspaceSlug} • role: ${invite.roleId}`"
+            :subtitle="`/${invite.workspaceSlug} • role: ${invite.roleSid}`"
             class="px-0"
           >
             <template #prepend>

package/test/addEditUiRuntime.test.js

@@ -51,6 +51,24 @@ test("createAddEditUiRuntime resolves edit-page relative list and cancel links",
   assert.equal(runtime.cancelUrl.value, "/contacts/7/addresses/42");
 });
 
+test("createAddEditUiRuntime resolves nested edit links from the record scope", () => {
+  const runtime = createAddEditUiRuntime({
+    recordIdParam: "petId",
+    routeParams: ref({
+      workspaceSlug: "dogandgroom",
+      contactId: "541841",
+      petId: "715528"
+    }),
+    routeParamNames: ref(["workspaceSlug", "contactId", "petId"]),
+    routePath: ref("/w/dogandgroom/admin/contacts/541841/pets/715528/edit/advanced"),
+    viewUrlTemplate: "..",
+    listUrlTemplate: "../.."
+  });
+
+  assert.equal(runtime.cancelUrl.value, "/w/dogandgroom/admin/contacts/541841/pets/715528");
+  assert.equal(runtime.listUrl.value, "/w/dogandgroom/admin/contacts/541841/pets");
+});
+
 test("createAddEditUiRuntime supports custom saved-record selector", () => {
   const runtime = createAddEditUiRuntime({
     recordIdParam: "addressId",