chore: wait for unknown lettermark (#17346)

* chore: wait for unknown lettermark
PostHog · Sep 11, 2023 · 41d555e · 41d555e
1 parent 8592992
commit 41d555e
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 2 deletions.
diff --git a/.storybook/test-runner.ts b/.storybook/test-runner.ts
@@ -57,6 +57,7 @@ const LOADER_SELECTORS = [
     '.LemonTableLoader',
     '[aria-busy="true"]',
     '.SessionRecordingPlayer--buffering',
+    '.Lettermark--unknown',
 ]
 
 const customSnapshotsDir = `${process.cwd()}/frontend/__snapshots__`

diff --git a/frontend/src/lib/lemon-ui/Lettermark/Lettermark.stories.tsx b/frontend/src/lib/lemon-ui/Lettermark/Lettermark.stories.tsx
@@ -13,6 +13,9 @@ const meta: Meta<typeof Lettermark> = {
                     'Lettermarks are used as visual, icon-like representations of actors (project members, organizations, query steps, cohort criteria groups, etc) in the product. Lettermarks should vary between the 8 variants we have shown below. Ideally the same colour is not placed next to each other',
             },
         },
+        testOptions: {
+            waitForLoadersToDisappear: false,
+        },
     },
     tags: ['autodocs'],
 }

diff --git a/frontend/src/lib/lemon-ui/Lettermark/Lettermark.tsx b/frontend/src/lib/lemon-ui/Lettermark/Lettermark.tsx
@@ -37,7 +37,8 @@ export function Lettermark({ name, index, color, rounded = false }: LettermarkPr
             className={clsx(
                 'Lettermark',
                 colorIndex && `Lettermark--variant-${colorIndex}`,
-                rounded && `Lettermark--rounded`
+                rounded && `Lettermark--rounded`,
+                representation === '?' && 'Lettermark--unknown'
             )}
             title={String(name)}
         >

diff --git a/frontend/src/scenes/ingestion/Sidebar.tsx b/frontend/src/scenes/ingestion/Sidebar.tsx
@@ -42,7 +42,7 @@ export function Sidebar(): JSX.Element {
                     {currentOrganization?.teams && currentOrganization.teams.length > 1 && (
                         <>
                             <LemonButtonWithDropdown
-                                icon={<Lettermark name={currentOrganization?.name} />}
+                                icon={<Lettermark name={currentOrganization.name} />}
                                 onClick={() => toggleProjectSwitcher()}
                                 dropdown={{
                                     visible: isProjectSwitcherShown,