feat(query-builder): Add empty state for the full-width menu

getsentry · Sep 20, 2024 · 40a39b1 · 40a39b1
1 parent f68f0d0
commit 40a39b1
Showing 1 changed file with 29 additions and 1 deletion.
diff --git a/static/app/components/searchQueryBuilder/tokens/filterKeyListBox/index.tsx b/static/app/components/searchQueryBuilder/tokens/filterKeyListBox/index.tsx
@@ -222,7 +222,20 @@ function FilterKeyMenuContent<T extends SelectOptionOrSectionWithKey<string>>({
       </SectionedListBoxPane>
       {showDetailsPane ? (
         <DetailsPane>
-          {focusedKey ? <KeyDescription size="md" tag={focusedKey} /> : null}
+          {focusedKey ? (
+            <KeyDescription size="md" tag={focusedKey} />
+          ) : (
+            <EmptyState>
+              <div>
+                <p>{t('No filter selected.')}</p>
+                <p>
+                  {t(
+                    'Hover over a filter from the list on the left to see more details.'
+                  )}
+                </p>
+              </div>
+            </EmptyState>
+          )}
         </DetailsPane>
       ) : null}
       <FeedbackFooter />
@@ -457,3 +470,18 @@ const StyledPositionWrapper = styled('div')<{visible?: boolean}>`
   display: ${p => (p.visible ? 'block' : 'none')};
   z-index: ${p => p.theme.zIndex.tooltip};
 `;
+
+const EmptyState = styled('div')`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: ${space(4)};
+  text-align: center;
+  color: ${p => p.theme.subText};
+
+  div {
+    max-width: 280px;
+  }
+`;