test: Add tests for containers, tabs, reordering, and grouping

54 tests: group always 1 tab, add tab creates 2nd, title syncs,
delete to 1 keeps tab, fill-right positioning, section reorder.

Author: alex-fedotyev

packages/app/src/DBDashboardPage.tsx

@@ -148,8 +148,8 @@ type MoveTarget = {
   containerId: string;
   tabId?: string;
   label: string;
-  // For tabs: the group name shown as a section header in the menu
-  groupLabel?: string;
+  // For tabs: all tabs in order with the target tab ID
+  allTabs?: { id: string; title: string }[];
 };
 
 const tileToLayoutItem = (chart: Tile): RGL.Layout => ({
@@ -444,40 +444,51 @@ const Tile = forwardRef(
                     (Ungrouped)
                   </Menu.Item>
                 )}
-                {(() => {
-                  const filtered = moveTargets.filter(
+                {moveTargets
+                  .filter(
                     t =>
                       !(
                         t.containerId === chart.containerId &&
                         t.tabId === chart.tabId
                       ),
-                  );
-                  let lastGroup: string | undefined;
-                  return filtered.map(t => {
-                    const items: React.ReactNode[] = [];
-                    // Add group header when entering a new tab group
-                    if (t.groupLabel && t.groupLabel !== lastGroup) {
-                      items.push(
-                        <Menu.Label key={`group-${t.containerId}`}>
-                          {t.groupLabel}
-                        </Menu.Label>,
-                      );
-                      lastGroup = t.groupLabel;
-                    } else if (!t.groupLabel) {
-                      lastGroup = undefined;
-                    }
-                    items.push(
-                      <Menu.Item
-                        key={`${t.containerId}-${t.tabId ?? ''}`}
-                        onClick={() => onMoveToSection(t.containerId, t.tabId)}
-                        style={t.groupLabel ? { paddingLeft: 24 } : undefined}
-                      >
-                        {t.label}
-                      </Menu.Item>,
-                    );
-                    return items;
-                  });
-                })()}
+                  )
+                  .map(t => (
+                    <Menu.Item
+                      key={`${t.containerId}-${t.tabId ?? ''}`}
+                      onClick={() => onMoveToSection(t.containerId, t.tabId)}
+                    >
+                      {t.allTabs ? (
+                        <span>
+                          {t.allTabs.map((tab, i) => (
+                            <span key={tab.id}>
+                              {i > 0 && (
+                                <span
+                                  style={{
+                                    color: 'var(--mantine-color-dimmed)',
+                                  }}
+                                >
+                                  {' | '}
+                                </span>
+                              )}
+                              <span
+                                style={
+                                  tab.id !== t.tabId
+                                    ? {
+                                        color: 'var(--mantine-color-dimmed)',
+                                      }
+                                    : undefined
+                                }
+                              >
+                                {tab.title}
+                              </span>
+                            </span>
+                          ))}
+                        </span>
+                      ) : (
+                        t.label
+                      )}
+                    </Menu.Item>
+                  ))}
               </Menu.Dropdown>
             </Menu>
           )}
@@ -1231,13 +1242,12 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
     for (const c of sections) {
       const cTabs = c.tabs ?? [];
       if (c.type === 'group' && cTabs.length >= 2) {
-        const groupLabel = cTabs[0]?.title ?? c.title;
         for (const tab of cTabs) {
           targets.push({
             containerId: c.id,
             tabId: tab.id,
             label: tab.title,
-            groupLabel,
+            allTabs: cTabs.map(t => ({ id: t.id, title: t.title })),
           });
         }
       } else if (c.type === 'group' && cTabs.length === 1) {