@multiplatform.one/backoffice 6.7.0 → 7.1.0

package/src/form/DocFormScreen.tsx

@@ -26,6 +26,7 @@ import {
   Text,
   XStack,
   YStack,
+  notify,
   type TabsItem,
 } from "@multiplatform.one/components";
 import { Input } from "@multiplatform.one/forms";
@@ -43,6 +44,8 @@ import {
   type BackofficeAction,
 } from "../config/BackofficeProvider";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import { deskDocUrl } from "../shared/deskLinks";
+import { getListNavNeighbors, type ListNavNeighbors } from "../shared/listNavContext";
 import { invalidateDocinfo, useDocinfo } from "../shared/useDocinfo";
 import { useRecentVisit } from "../shared/useRecentVisit";
 import { useDoctypeMeta } from "../shared/useDoctypeMeta";
@@ -51,7 +54,12 @@ import { setCreatePrefill } from "./createPrefill";
 import { normalizeDocPermissions } from "./docinfo";
 import { buildPermLevelMatrix } from "./fieldPermissions";
 import { createHttpClient, renameDoc, sendEmail } from "./formActions";
-import { EmailDialog, RenameDialog } from "./FormDialogs";
+import {
+  EmailDialog,
+  JumpToFieldDialog,
+  RenameDialog,
+  type JumpToFieldTarget,
+} from "./FormDialogs";
 import { FormErrorBoundary, wrapFieldWithErrorBoundary } from "./FormErrorBoundary";
 import { buildCopyValues, buildFormTabs, isPromptNamed } from "./formLayout";
 import { FormConnections } from "./FormConnections";
@@ -64,6 +72,8 @@ import {
   canOpenNewTab,
   openInNewTab,
   useBeforeUnloadGuard,
+  useDocPagerShortcuts,
+  useJumpToFieldShortcut,
   useNavigationDirtyGuard,
   useSaveShortcut,
 } from "./platformHooks";
@@ -158,6 +168,8 @@ export function DocFormScreen({
         ? {
             baseURL: config.baseURL,
             socketPort: config.socketPort,
+            siteName: config.siteName,
+            socketBaseURL: config.socketBaseURL,
             auth: config.auth,
             syncOptions: config.syncOptions,
             fixtures: config.fixtures,
@@ -296,6 +308,19 @@ export function DocFormScreen({
     t,
   ]);
 
+  const jumpTargets = useMemo<JumpToFieldTarget[]>(
+    () =>
+      formTabs.flatMap((tab) =>
+        tab.schema.fields.map((field) => ({
+          name: field.name,
+          label: field.label || field.name,
+          tabKey: tab.key,
+          tabLabel: tab.label,
+        })),
+      ),
+    [formTabs],
+  );
+
   const [activeTab, setActiveTab] = useState<string | undefined>(undefined);
   // Hidden link rows never render (desk parity — connections-data skips them).
   const showConnections =
@@ -328,6 +353,8 @@ export function DocFormScreen({
   );
   const [renameOpen, setRenameOpen] = useState(false);
   const [emailOpen, setEmailOpen] = useState(false);
+  const [jumpOpen, setJumpOpen] = useState(false);
+  const [pendingJump, setPendingJump] = useState<string | undefined>(undefined);
 
   const [validationSummary, setValidationSummary] = useState<string | undefined>(undefined);
 
@@ -342,8 +369,10 @@ export function DocFormScreen({
       );
       if (owner) setActiveTab(owner.key);
       setValidationSummary(
-        t("validationSummary", "Cannot save — {{count}} required field(s) are missing.", {
+        t("validationSummary", {
           count: errorFields.length,
+          defaultValue_one: "Cannot save — {{count}} required field is missing.",
+          defaultValue_other: "Cannot save — {{count}} required fields are missing.",
         }),
       );
     } else {
@@ -352,6 +381,14 @@ export function DocFormScreen({
     const savedName = await engine.save();
     if (!savedName) return;
     setValidationSummary(undefined);
+    // Explicit save confirmation (desk's green "Saved" toast) — the
+    // "Not Saved" badge clearing alone is too passive a success signal.
+    // Errors stay on the existing inline path (engine.errors.general).
+    notify({
+      severity: "success",
+      scope: "page",
+      body: t("savedToast", "Saved"),
+    });
     invalidateDocinfo(doctype, savedName);
     emitEvent({ type: "doc-saved", doctype, name: savedName, isNew: isCreate });
     onSaved?.({ ...engine.doc, name: savedName });
@@ -368,6 +405,7 @@ export function DocFormScreen({
   useSaveShortcut(!formReadOnly, () => {
     if (engine.isDirty || isCreate) void handleSave();
   });
+  useJumpToFieldShortcut(jumpTargets.length > 0 && !jumpOpen, () => setJumpOpen(true));
 
   const handleAmend = useCallback(() => {
     if (!meta || !docName) return;
@@ -397,6 +435,30 @@ export function DocFormScreen({
     [connection, docName, doctype, navigator, paths],
   );
 
+  // -----------------------------------------------------------------------
+  // Prev/next document pager (desk ‹ › parity): neighbors ride the SAME
+  // list order the user came from — DoctypeListScreen mirrors each resolved
+  // page into the shared listNavContext store (sessionStorage-backed so a
+  // reload keeps paging). No context / not in the last result (deep link,
+  // renamed doc) → no pager at all: hidden beats dead arrows (LC-40).
+  // -----------------------------------------------------------------------
+  const docPager = useMemo<ListNavNeighbors>(
+    () => (docName ? getListNavNeighbors(doctype, docName) : { inList: false }),
+    [doctype, docName],
+  );
+  const openNeighborDoc = useCallback(
+    (target: string | undefined) => {
+      // navigate() (not navigator.navigate) so the dirty guard can prompt.
+      if (target) navigate(paths.form(doctype, target));
+    },
+    [navigate, paths, doctype],
+  );
+  useDocPagerShortcuts(
+    docPager.inList,
+    () => openNeighborDoc(docPager.prev),
+    () => openNeighborDoc(docPager.next),
+  );
+
   const titleFieldValue =
     meta?.title_field && typeof engine.doc[meta.title_field] === "string"
       ? // Title fields can hold rich text (e.g. ToDo.description = "<p>…</p>");
@@ -471,12 +533,30 @@ export function DocFormScreen({
         onSelect: () => setActiveTab(CONNECTIONS_TAB),
       });
     }
+    if (jumpTargets.length > 0) {
+      items.push({
+        key: "jump-field",
+        label: t("jumpToField", "Jump to Field"),
+        icon: "jump",
+        onSelect: () => setJumpOpen(true),
+      });
+    }
     items.push({
       key: "jump-list",
       label: t("menuJumpToList", "Jump to {{doctype}} List", { doctype }),
       icon: "list",
       onSelect: () => navigate(paths.list(doctype)),
     });
+    if (connection && !connection.fixtures && canOpenNewTab()) {
+      // Desk counterpart of this document — same session caveat as Print
+      // off-web (system browser opens unauthenticated).
+      items.push({
+        key: "desk",
+        label: t("openInDesk", "Open in Desk"),
+        icon: "desk",
+        onSelect: () => openInNewTab(deskDocUrl(connection.baseURL, doctype, name)),
+      });
+    }
     if (capabilities.newDoc.enabled && perms.create) {
       items.push({
         key: "new",
@@ -508,6 +588,7 @@ export function DocFormScreen({
     doctype,
     name,
     showConnections,
+    jumpTargets,
     navigate,
     paths,
     capabilities,
@@ -534,6 +615,42 @@ export function DocFormScreen({
     return items;
   }, [menuItems, actions.form, actionOverrides, doctype, docName]);
 
+  const handleJumpToField = useCallback((field: JumpToFieldTarget) => {
+    setJumpOpen(false);
+    setActiveTab(field.tabKey);
+    setPendingJump(field.name);
+  }, []);
+
+  // Desk Jump-to-field: switch tab (lazyMount) then focus the LC-71 field shell.
+  useEffect(() => {
+    if (!pendingJump) return;
+    if (typeof document === "undefined") {
+      setPendingJump(undefined);
+      return;
+    }
+    let cancelled = false;
+    let tries = 0;
+    const tick = () => {
+      if (cancelled) return;
+      const root = document.getElementById(`form-field-${pendingJump}`);
+      if (root) {
+        root.scrollIntoView({ block: "center" });
+        const focusable = root.querySelector<HTMLElement>(
+          "input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [contenteditable='true']",
+        );
+        focusable?.focus();
+        setPendingJump(undefined);
+        return;
+      }
+      if (tries++ < 20) requestAnimationFrame(tick);
+      else setPendingJump(undefined);
+    };
+    requestAnimationFrame(tick);
+    return () => {
+      cancelled = true;
+    };
+  }, [pendingJump]);
+
   // -----------------------------------------------------------------------
   // Early states
   // -----------------------------------------------------------------------
@@ -716,7 +833,19 @@ export function DocFormScreen({
 
   const timeline =
     capabilities.timeline.enabled && !isCreate && docName ? (
-      <FormTimeline doctype={doctype} name={docName} />
+      // Composed mode: the screen's shared docinfo (and its refresh) feed
+      // the timeline. Self-fetch mode subscribed the timeline to its OWN
+      // cache entry, which the save path's invalidate+reload orphaned — the
+      // feed then showed stale versions until a full remount (no new
+      // old→new rows after saving).
+      <FormTimeline
+        doctype={doctype}
+        name={docName}
+        docInfo={docinfo}
+        refreshDocInfo={refreshDocinfo}
+        currentUser={engine.currentUser}
+        connection={connection}
+      />
     ) : null;
 
   const sidebar =
@@ -761,6 +890,19 @@ export function DocFormScreen({
       onCancel={() => setConfirmAction("cancel")}
       onAmend={handleAmend}
       menuItems={effectiveMenuItems}
+      onOpenDesk={
+        !isCreate && docName && connection && !connection.fixtures && canOpenNewTab()
+          ? () => openInNewTab(deskDocUrl(connection.baseURL, doctype, docName))
+          : undefined
+      }
+      {...(docPager.inList
+        ? {
+            onPrevDoc: () => openNeighborDoc(docPager.prev),
+            onNextDoc: () => openNeighborDoc(docPager.next),
+            prevDocDisabled: !docPager.prev,
+            nextDocDisabled: !docPager.next,
+          }
+        : {})}
     />
   );
 
@@ -817,17 +959,9 @@ export function DocFormScreen({
           <Text color="$orange11" fontSize="$3" flex={1}>
             {t("conflictBanner", "This document changed on the server while you were editing.")}
           </Text>
-          <Text
-            color="$orange11"
-            fontSize="$3"
-            fontWeight="700"
-            cursor="pointer"
-            role="button"
-            aria-label={t("reloadDoc", "Reload")}
-            onPress={engine.reload}
-          >
+          <Button size="$2" outlined aria-label={t("reloadDoc", "Reload")} onPress={engine.reload}>
             {t("reloadDoc", "Reload")}
-          </Text>
+          </Button>
         </XStack>
       )}
 
@@ -867,7 +1001,14 @@ export function DocFormScreen({
         onConfirm={() => {
           setConfirmAction(undefined);
           void engine.submit().then((ok) => {
-            if (ok) reloadDocinfo();
+            if (ok) {
+              notify({
+                severity: "success",
+                scope: "page",
+                body: t("submittedToast", "Submitted"),
+              });
+              reloadDocinfo();
+            }
           });
         }}
       />
@@ -884,7 +1025,14 @@ export function DocFormScreen({
         onConfirm={() => {
           setConfirmAction(undefined);
           void engine.cancel().then((ok) => {
-            if (ok) reloadDocinfo();
+            if (ok) {
+              notify({
+                severity: "success",
+                scope: "page",
+                body: t("cancelledToast", "Cancelled"),
+              });
+              reloadDocinfo();
+            }
           });
         }}
       />
@@ -964,6 +1112,12 @@ export function DocFormScreen({
             .finally(reloadDocinfo);
         }}
       />
+      <JumpToFieldDialog
+        open={jumpOpen}
+        onOpenChange={setJumpOpen}
+        fields={jumpTargets}
+        onJump={handleJumpToField}
+      />
     </YStack>
   );
 }

package/src/form/FormConnections.tsx

@@ -12,7 +12,12 @@ import {
   XStack,
   YStack,
 } from "@multiplatform.one/components";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  ensureFocusVisibleRing,
+  getGroupPosition,
+  stackRadiusProps,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
 import { PlusIcon } from "@phosphor-icons/react";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
@@ -41,17 +46,22 @@ interface ConnectionRowProps {
   docname: string;
   count?: ConnectionCount;
   countsLoading: boolean;
+  index: number;
+  total: number;
 }
 
-function ConnectionRow({ link, docname, count, countsLoading }: ConnectionRowProps) {
+function ConnectionRow({ link, docname, count, countsLoading, index, total }: ConnectionRowProps) {
   const navigator = useBackofficeNavigator();
   const paths = useBackofficePaths();
+  const { knobProps } = useResolvedKnobs();
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
   const countText = formatConnectionCount(count?.count);
   const openText = formatConnectionCount(count?.openCount);
   // Desk parity: an internal link without collected names has nowhere to
   // navigate (its filter is `name in (...)`), so the row press is disabled.
   const disabled = link.isChildTable && !count?.names?.length;
+  const position = getGroupPosition(index, total);
+  const corners = stackRadiusProps(position, knobProps.borderRadius.borderRadius);
   return (
     <XStack
       role="link"
@@ -68,8 +78,25 @@ function ConnectionRow({ link, docname, count, countsLoading }: ConnectionRowPro
       gap="$2"
       paddingVertical="$1"
       paddingHorizontal="$1.5"
-      borderRadius="$2"
-      hoverStyle={disabled ? undefined : { backgroundColor: "$color3" }}
+      overflow="hidden"
+      tabIndex={disabled ? -1 : 0}
+      outlineWidth={0}
+      {...corners}
+      {...{ "data-group-position": position }}
+      hoverStyle={disabled ? undefined : { backgroundColor: "$color3", ...corners }}
+      pressStyle={disabled ? undefined : { backgroundColor: "$color5", ...corners }}
+      focusStyle={{ outlineWidth: 0 }}
+      focusVisibleStyle={ensureFocusVisibleRing({ outlineOffset: -2 })}
+      onKeyDown={
+        disabled
+          ? undefined
+          : (((e: { key?: string; preventDefault?: () => void }) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault?.();
+                navigator.navigate(connectionListHref(paths, link, docname, count?.names));
+              }
+            }) as unknown as () => void)
+      }
     >
       <SizableText
         size="$3"
@@ -140,13 +167,15 @@ function ConnectionGroupCard({ group, docname, counts, countsLoading }: Connecti
         </SizableText>
         <Separator />
         <YStack>
-          {group.links.map((link) => (
+          {group.links.map((link, index) => (
             <ConnectionRow
               key={link.targetDoctype}
               link={link}
               docname={docname}
               count={counts[link.targetDoctype]}
               countsLoading={countsLoading}
+              index={index}
+              total={group.links.length}
             />
           ))}
         </YStack>

package/src/form/FormDialogs.tsx

@@ -4,13 +4,19 @@
  *  - RenameDialog  → frappe.rename_doc
  *  - EmailDialog   → frappe.core.doctype.communication.email.make
  *  - AssignDialog  → frappe.desk.form.assign_to.add (User link search)
+ *  - JumpToFieldDialog → desk Ctrl/Cmd+J field picker
  */
 
-import { ConfirmDialog, Text, YStack } from "@multiplatform.one/components";
+import { ConfirmDialog, ScrollView, Text, XStack, YStack } from "@multiplatform.one/components";
 import { Input, TextArea } from "@multiplatform.one/forms";
 import { Link } from "@multiplatform.one/frappe-ui";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { useEffect, useState } from "react";
+import {
+  ensureFocusVisibleRing,
+  getGroupPosition,
+  stackRadiusProps,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
+import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 
@@ -170,3 +176,111 @@ export function AssignDialog({ open, onOpenChange, onAssign }: AssignDialogProps
     </ConfirmDialog>
   );
 }
+
+// ---------------------------------------------------------------------------
+// Jump to field (desk Ctrl/Cmd+J)
+// ---------------------------------------------------------------------------
+
+export interface JumpToFieldTarget {
+  name: string;
+  label: string;
+  tabKey: string;
+  tabLabel: string;
+}
+
+export interface JumpToFieldDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  fields: readonly JumpToFieldTarget[];
+  onJump: (field: JumpToFieldTarget) => void;
+}
+
+export function JumpToFieldDialog({ open, onOpenChange, fields, onJump }: JumpToFieldDialogProps) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
+  const [query, setQuery] = useState("");
+
+  useEffect(() => {
+    if (!open) setQuery("");
+  }, [open]);
+
+  const matches = useMemo(() => {
+    const needle = query.trim().toLowerCase();
+    if (!needle) return fields;
+    return fields.filter(
+      (field) =>
+        field.label.toLowerCase().includes(needle) || field.name.toLowerCase().includes(needle),
+    );
+  }, [fields, query]);
+
+  return (
+    <ConfirmDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title={t("jumpToFieldTitle", "Jump to field")}
+      confirmLabel={t("jumpToField", "Jump")}
+      confirmDisabled={matches.length === 0}
+      confirmDisabledReason={t("jumpToFieldNone", "No matching fields")}
+      allowManyActions
+      onConfirm={() => {
+        if (matches[0]) onJump(matches[0]);
+      }}
+    >
+      <YStack {...knobProps.gap} minWidth={280} maxWidth={420}>
+        <Input
+          value={query}
+          onChangeText={setQuery}
+          placeholder={t("jumpToFieldPlaceholder", "Search fields…")}
+          inputProps={{
+            "aria-label": t("jumpToFieldPlaceholder", "Search fields…"),
+            autoFocus: true,
+          }}
+        />
+        <ScrollView maxHeight={240}>
+          <YStack>
+            {matches.map((field, index) => {
+              const position = getGroupPosition(index, matches.length);
+              const corners = stackRadiusProps(position, knobProps.borderRadius.borderRadius);
+              return (
+                <XStack
+                  key={`${field.tabKey}:${field.name}`}
+                  role="button"
+                  tabIndex={0}
+                  alignItems="center"
+                  paddingVertical="$2"
+                  paddingHorizontal="$3"
+                  overflow="hidden"
+                  cursor="pointer"
+                  outlineWidth={0}
+                  {...corners}
+                  hoverStyle={{ backgroundColor: "$color3", ...corners }}
+                  pressStyle={{ backgroundColor: "$color5", ...corners }}
+                  focusStyle={{ outlineWidth: 0 }}
+                  focusVisibleStyle={ensureFocusVisibleRing({ outlineOffset: -2 })}
+                  onPress={() => onJump(field)}
+                  onKeyDown={
+                    ((e: { key?: string; preventDefault?: () => void }) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault?.();
+                        onJump(field);
+                      }
+                    }) as unknown as () => void
+                  }
+                >
+                  <YStack flex={1} minWidth={0}>
+                    <Text fontSize="$3" color="$color12" numberOfLines={1}>
+                      {field.label}
+                    </Text>
+                    <Text fontSize="$1" color="$color11" numberOfLines={1}>
+                      {field.tabLabel}
+                    </Text>
+                  </YStack>
+                </XStack>
+              );
+            })}
+          </YStack>
+        </ScrollView>
+      </YStack>
+    </ConfirmDialog>
+  );
+}

package/src/form/FormErrorBoundary.spec.tsx

@@ -112,6 +112,7 @@ describe("form error containment", () => {
     const subjectInput = await screen.findByDisplayValue("Containment subject", undefined, {
       timeout: 10000,
     });
+    expect(screen.getByTestId("form-field-subject")).toBeTruthy();
 
     // The crashing field is an inline honest-error slot: label + panel + Retry.
     const slot = await screen.findByTestId("form-field-error-broken_editor");

package/src/form/FormErrorBoundary.tsx

@@ -30,8 +30,8 @@ import React from "react";
  */
 import { AsyncBoundary, Text, YStack } from "@multiplatform.one/components";
 import type { FieldSchema } from "@multiplatform.one/frappe-ui";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { Component, type ErrorInfo, type ReactNode } from "react";
+import { ensureCompositeFocusRing, useResolvedKnobs } from "@multiplatform.one/theme";
+import { Component, useEffect, type ErrorInfo, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 
@@ -126,15 +126,38 @@ export class FormErrorBoundary extends Component<FormErrorBoundaryProps, FormErr
  * SchemaForm `renderFieldWrapper` bridge — one boundary per rendered field.
  * Stable module-level function so SchemaForm consumers can pass it directly
  * without memoization.
+ *
+ * LC-71: the shell is an anchor, not a second ring. It mounts the composite
+ * ring stylesheet so catalog fields ring the control box (never the inner
+ * native field) and exposes `form-field-${name}` for desk Jump-to-field.
  */
-export function wrapFieldWithErrorBoundary(rendered: ReactNode, field: FieldSchema): ReactNode {
+function FieldFocusShell({ field, children }: { field: FieldSchema; children: ReactNode }) {
+  useEffect(() => {
+    ensureCompositeFocusRing();
+  }, []);
   return (
-    <FormErrorBoundary
-      key={field.name}
-      label={field.label}
-      testID={`form-field-error-${field.name}`}
+    <YStack
+      id={`form-field-${field.name}`}
+      nativeID={`form-field-${field.name}`}
+      minWidth={0}
+      testID={`form-field-${field.name}`}
+      {...{ "data-fieldname": field.name }}
     >
-      {rendered}
-    </FormErrorBoundary>
+      {children}
+    </YStack>
+  );
+}
+
+export function wrapFieldWithErrorBoundary(rendered: ReactNode, field: FieldSchema): ReactNode {
+  return (
+    <FieldFocusShell field={field}>
+      <FormErrorBoundary
+        key={field.name}
+        label={field.label}
+        testID={`form-field-error-${field.name}`}
+      >
+        {rendered}
+      </FormErrorBoundary>
+    </FieldFocusShell>
   );
 }

package/src/form/FormSidebarPanel.spec.tsx

@@ -0,0 +1,57 @@
+import { Accordion } from "@multiplatform.one/components";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { SidebarAccordionTrigger } from "./FormSidebarPanel";
+
+afterEach(cleanup);
+
+const section = (key: string, title: string) => ({
+  key,
+  title,
+  count: 0,
+  icon: null,
+  content: null,
+});
+
+describe("SidebarAccordionTrigger stacked-group radius (LC-72)", () => {
+  it("marks Assigned To first, Tags middle, Liked By last", () => {
+    renderWithProviders(
+      <Accordion type="multiple" variant="plain">
+        <Accordion.Item value="assigned" borderBottomWidth={0}>
+          <SidebarAccordionTrigger
+            section={section("assigned", "Assigned To")}
+            index={0}
+            count={5}
+            open={false}
+          />
+        </Accordion.Item>
+        <Accordion.Item value="tags" borderBottomWidth={0}>
+          <SidebarAccordionTrigger
+            section={section("tags", "Tags")}
+            index={2}
+            count={5}
+            open={false}
+          />
+        </Accordion.Item>
+        <Accordion.Item value="liked" borderBottomWidth={0}>
+          <SidebarAccordionTrigger
+            section={section("liked", "Liked By")}
+            index={4}
+            count={5}
+            open={false}
+          />
+        </Accordion.Item>
+      </Accordion>,
+    );
+    expect(
+      screen.getByTestId("form-sidebar-section-assigned").getAttribute("data-group-position"),
+    ).toBe("first");
+    expect(
+      screen.getByTestId("form-sidebar-section-tags").getAttribute("data-group-position"),
+    ).toBe("middle");
+    expect(
+      screen.getByTestId("form-sidebar-section-liked").getAttribute("data-group-position"),
+    ).toBe("last");
+  });
+});