fix(platform): restore the design system's activity and property lists after the merge

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/home/hooks/use-chat.dom.test.tsx

@@ -49,10 +49,7 @@ const {
     >(),
 }))
 
-vi.mock(
-  '@/app/workspace/[workspaceId]/providers/feature-flags-provider',
-  () => featureFlagsProviderMock
-)
+vi.mock('@/lib/core/config/feature-flags-context', () => featureFlagsProviderMock)
 
 vi.mock('next/navigation', () => nextNavigationMock)
 vi.mock('@/lib/desktop', () => libDesktopMock)

apps/sim/app/workspace/[workspaceId]/home/hooks/use-chat.test.ts

@@ -21,10 +21,7 @@ import type { ContentBlock } from '@/app/workspace/[workspaceId]/home/types'
 
 nextNavigationMockFns.mockUsePathname.mockReturnValue('/workspace/workspace-1/home')
 
-vi.mock(
-  '@/app/workspace/[workspaceId]/providers/feature-flags-provider',
-  () => featureFlagsProviderMock
-)
+vi.mock('@/lib/core/config/feature-flags-context', () => featureFlagsProviderMock)
 
 vi.mock('next/navigation', () => nextNavigationMock)
 

apps/sim/platform/design-system/components/data-display/data-display.module.css

@@ -6,8 +6,8 @@
 }
 .metrics {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--spacing-96)), 1fr));
-  gap: var(--spacing-24);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--spacing-128)), 1fr));
+  gap: var(--spacing-32);
 }
 .metric {
   display: grid;

apps/sim/platform/design-system/components/disclosure/disclosure.module.css

@@ -29,10 +29,7 @@
 .activity {
   display: grid;
   min-inline-size: 0;
-  gap: var(--ui-stack-gap);
-}
-.activityPanel {
-  margin-block-start: var(--ui-section-gap);
+  gap: var(--ui-section-gap);
 }
 .activity > .summary {
   color: var(--ui-secondary);
@@ -66,7 +63,7 @@
 .collectionActions {
   position: absolute;
   inset-block-start: 0;
-  inset-inline-end: calc((var(--spacing-app-chip) - var(--spacing-24)) / 2);
+  inset-inline-end: 0;
   min-block-size: var(--spacing-28);
   display: flex;
   align-items: center;

apps/sim/platform/design-system/components/disclosure/disclosure.tsx

@@ -54,7 +54,7 @@ export function Disclosure({
           {title}
         </Collapsible.Trigger>
         {introduction}
-        <Collapsible.Panel className={styles.activityPanel}>{children}</Collapsible.Panel>
+        <Collapsible.Panel>{children}</Collapsible.Panel>
       </Collapsible.Root>
     )
   const disclosure = (

apps/sim/platform/design-system/components/empty-state/empty-state.module.css

@@ -9,7 +9,7 @@
 .empty {
   justify-content: center;
   min-height: calc(var(--spacing-56) * 2);
-  padding-block: var(--spacing-16);
+  padding: var(--spacing-16) var(--spacing-8);
   color: var(--ui-ink);
 }
 

apps/sim/platform/design-system/components/property-list/property-list.tsx

@@ -28,9 +28,7 @@ export function PropertyList({ title, titleHidden, properties }: PropertyListPro
           <div className={styles.row} key={property.id}>
             <dt data-type='T050'>{property.label}</dt>
             <dd data-type='T060' data-kind={property.kind}>
-              {property.kind === 'person' && (
-                <Avatar name={property.value} src={property.src} decorative />
-              )}
+              {property.kind === 'person' && <Avatar name={property.value} src={property.src} />}
               {property.kind === 'link' ? (
                 <Link href={property.href}>{property.value}</Link>
               ) : (

apps/sim/scripts/org-redesign-e2e/checks/screenshots.ts

@@ -17,7 +17,7 @@ import {
   sql,
   withSession,
 } from '@/scripts/org-redesign-e2e/harness'
-import { expectPageNotFound, orgChip } from '@/scripts/org-redesign-e2e/locators'
+import { expectPageNotFound, openOrgCard, orgChip } from '@/scripts/org-redesign-e2e/locators'
 
 interface StateShot {
   name: string
@@ -90,13 +90,13 @@ const STATE_SHOTS: readonly StateShot[] = [
   {
     name: 'flyout-organization',
     path: 'home',
-    open: (page) => orgChip(page).click(),
+    open: (page) => openOrgCard(page),
     openOnPhone: async (page) => {
       await page
         .getByRole('button', { name: /open (sidebar|menu|navigation)/i })
         .first()
         .click()
-      await orgChip(page).click()
+      await openOrgCard(page)
     },
   },
   {

apps/sim/scripts/org-redesign-e2e/checks/sidebar.ts

@@ -40,6 +40,8 @@ import {
   menuEntry,
   navigateWithinDocument,
   navLabels,
+  openMenu,
+  openOrgCard,
   openRowMenu,
   orgCard,
   orgChip,
@@ -335,8 +337,7 @@ export async function sidebarChecks() {
       await onHome(MEMBER, async ({ page }) => {
         const chip = orgChip(page)
         await expect(chip).toContainText(ORGANIZATION_NAME)
-        await chip.click()
-        const card = orgCard(page)
+        const card = await openOrgCard(page)
         await expect(card.getByText(/\d+ members?/)).toBeVisible()
         await expect(card.getByRole('button', { name: 'Rename organization' })).toHaveCount(0)
         await expect(card.getByRole('button', { name: 'Change organization logo' })).toHaveCount(0)
@@ -358,7 +359,7 @@ export async function sidebarChecks() {
             return card.getByRole('textbox', { name: 'Organization name' })
           }
           const renamed = `${ORGANIZATION_NAME} Group`
-          await chip.click()
+          await openOrgCard(page)
           const field = await startRename()
           await field.fill('Discarded name')
           await field.press('Escape')
@@ -369,7 +370,7 @@ export async function sidebarChecks() {
           await expect(chip).toContainText(renamed)
           await page.reload()
           await expect(chip).toContainText(renamed)
-          await chip.click()
+          await openOrgCard(page)
           const restore = await startRename()
           await restore.fill(ORGANIZATION_NAME)
           await restore.press('Enter')
@@ -393,7 +394,7 @@ export async function sidebarChecks() {
             : route.continue()
         )
         await page.goto(orgUrl('/home'))
-        await orgChip(page).click()
+        await openOrgCard(page)
         const card = orgCard(page)
         await card.getByRole('button', { name: 'Rename organization' }).click()
         const field = card.getByRole('textbox', { name: 'Organization name' })
@@ -410,7 +411,7 @@ export async function sidebarChecks() {
       () => sql`update organization set logo = null where id = ${ORGANIZATION_ID}`,
       () =>
         onHome(ADMIN, async ({ page }) => {
-          await orgChip(page).click()
+          await openOrgCard(page)
           const card = orgCard(page)
           await expect(card.getByRole('button', { name: 'Change organization logo' })).toBeEnabled()
           const started = page.waitForResponse(
@@ -442,13 +443,13 @@ export async function sidebarChecks() {
   )
   await check('Invite follows the default group, and an admin invites when it allows', async () => {
     await onHome(ADMIN, async ({ page }) => {
-      await orgChip(page).click()
+      await openOrgCard(page)
       await expect(orgCard(page).getByRole('button', { name: 'Invite', exact: true })).toHaveCount(
         0
       )
       await sql`update permission_group set config = config - 'disableInvitations' where id = ${STANDARD_GROUP_ID}`
       await page.reload()
-      await orgChip(page).click()
+      await openOrgCard(page)
       await orgCard(page).getByRole('button', { name: 'Invite', exact: true }).click()
       const modal = dialog(page, 'Invite people')
       await expect(modal).toBeVisible()
@@ -729,8 +730,7 @@ export async function sidebarChecks() {
       const chip = accountChip(page)
       await expect(chip).toContainText(MEMBER.name)
       await expect(chip).toHaveAccessibleName(`${MEMBER.name}, account menu`)
-      await chip.click()
-      const menu = dialog(page, 'Account menu')
+      const menu = await openMenu(chip, dialog(page, 'Account menu'))
       await expect(menu.getByRole('button', { name: 'Sign out', exact: true })).toBeVisible()
       await menu.getByRole('button', { name: 'Settings', exact: true }).click()
       await expect(page).toHaveURL(orgUrl('/settings/general'))

apps/sim/scripts/org-redesign-e2e/locators.ts

@@ -1,5 +1,5 @@
 import assert from 'node:assert/strict'
-import type { Page } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'
 import { expect } from '@/scripts/org-redesign-e2e/harness'
 
 declare global {
@@ -21,6 +21,15 @@ export const searchField = (page: Page) =>
 export const dialog = (page: Page, name: string | RegExp) => page.getByRole('dialog', { name })
 export const orgChip = (page: Page) => page.getByRole('button', { name: 'Organization menu' })
 export const orgCard = (page: Page) => dialog(page, 'Organization menu')
+/** Clicks until its menu opens, since a click that lands before the rail hydrates does nothing. */
+export async function openMenu(trigger: Locator, menu: Locator) {
+  await expect(async () => {
+    await trigger.click()
+    await expect(menu).toBeVisible({ timeout: 1_000 })
+  }).toPass({ timeout: 20_000 })
+  return menu
+}
+export const openOrgCard = (page: Page) => openMenu(orgChip(page), orgCard(page))
 /** Outside the sidebar, which has a section with the same name as Home's Workspaces. */
 export const homeRegion = (page: Page, name: string) =>
   page.getByRole('main').getByRole('region', { name, exact: true })