Browse Source

fix(perf): Fix icon rendering in the transaction summary search (#44135)

Sometimes when the search component needs to be rerendered with the
alert icon, there's some state bug where an icon is hidden behind a
vertical ellipsis icon. This ensures that the component state is rerun
when the `actionBarItems` prop changes.
Dameli Ushbayeva 2 years ago
parent
commit
94c14f4209

+ 10 - 3
static/app/components/smartSearchBar/index.tsx

@@ -366,9 +366,12 @@ class SmartSearchBar extends Component<DefaultProps & Props, State> {
   }
 
   componentDidUpdate(prevProps: Props) {
-    const {query, customPerformanceMetrics} = this.props;
-    const {query: lastQuery, customPerformanceMetrics: lastCustomPerformanceMetrics} =
-      prevProps;
+    const {query, customPerformanceMetrics, actionBarItems} = this.props;
+    const {
+      query: lastQuery,
+      customPerformanceMetrics: lastCustomPerformanceMetrics,
+      actionBarItems: lastAcionBarItems,
+    } = prevProps;
 
     if (
       (query !== lastQuery && (defined(query) || defined(lastQuery))) ||
@@ -377,6 +380,10 @@ class SmartSearchBar extends Component<DefaultProps & Props, State> {
       // eslint-disable-next-line react/no-did-update-set-state
       this.setState(this.makeQueryState(addSpace(query ?? undefined)));
     }
+
+    if (lastAcionBarItems?.length !== actionBarItems?.length) {
+      this.setState({numActionsVisible: actionBarItems?.length ?? 0});
+    }
   }
 
   componentWillUnmount() {

+ 1 - 1
static/app/views/performance/transactionSummary/transactionOverview/content.tsx

@@ -196,7 +196,7 @@ function SummaryContent({
                 </Tooltip>
               ),
               menuItem: {
-                key: 'filter-alert',
+                key: 'alert',
               },
             }),
           },