fix(dashboards): Updates metric widget context menu to also hide and …

…show on hover (#78379) Extends the hover/focus to show widget menu feature to also work on metric widgets
getsentry · Oct 1, 2024 · 6c126ab · 6c126ab
1 parent 19c98eb
commit 6c126ab
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 25 deletions.
diff --git a/static/app/views/dashboards/metrics/widgetCard.tsx b/static/app/views/dashboards/metrics/widgetCard.tsx
@@ -32,7 +32,11 @@ import {
 } from 'sentry/views/dashboards/metrics/utils';
 import type {DashboardFilters, Widget} from 'sentry/views/dashboards/types';
 import {DisplayType} from 'sentry/views/dashboards/types';
-import {WidgetCardPanel, WidgetTitleRow} from 'sentry/views/dashboards/widgetCard';
+import {
+  WidgetCardContextMenuContainer,
+  WidgetCardPanel,
+  WidgetTitleRow,
+} from 'sentry/views/dashboards/widgetCard';
 import {DashboardsMEPContext} from 'sentry/views/dashboards/widgetCard/dashboardsMEPContext';
 import {Toolbar} from 'sentry/views/dashboards/widgetCard/toolbar';
 import WidgetCardContextMenu from 'sentry/views/dashboards/widgetCard/widgetCardContextMenu';
@@ -196,26 +200,28 @@ export function MetricWidgetCard({
 
           <ContextMenuWrapper>
             {showContextMenu && !isEditingDashboard && (
-              <WidgetCardContextMenu
-                organization={organization}
-                widget={widget}
-                selection={selection}
-                showContextMenu
-                isPreview={false}
-                widgetLimitReached={false}
-                onEdit={() => {
-                  router.push({
-                    pathname: `${location.pathname}${
-                      location.pathname.endsWith('/') ? '' : '/'
-                    }widget/${widget.id}/`,
-                    query: location.query,
-                  });
-                }}
-                router={router}
-                location={location}
-                onDelete={onDelete}
-                onDuplicate={onDuplicate}
-              />
+              <WidgetCardContextMenuContainer>
+                <WidgetCardContextMenu
+                  organization={organization}
+                  widget={widget}
+                  selection={selection}
+                  showContextMenu
+                  isPreview={false}
+                  widgetLimitReached={false}
+                  onEdit={() => {
+                    router.push({
+                      pathname: `${location.pathname}${
+                        location.pathname.endsWith('/') ? '' : '/'
+                      }widget/${widget.id}/`,
+                      query: location.query,
+                    });
+                  }}
+                  router={router}
+                  location={location}
+                  onDelete={onDelete}
+                  onDuplicate={onDuplicate}
+                />
+              </WidgetCardContextMenuContainer>
             )}
           </ContextMenuWrapper>
         </WidgetHeaderWrapper>

diff --git a/static/app/views/dashboards/widgetCard/index.tsx b/static/app/views/dashboards/widgetCard/index.tsx
@@ -170,7 +170,7 @@ class WidgetCard extends Component<Props, State> {
     }
 
     return (
-      <StyledWidgetCardContextMenuContainer>
+      <WidgetCardContextMenuContainer>
         <WidgetCardContextMenu
           organization={organization}
           widget={widget}
@@ -192,7 +192,7 @@ class WidgetCard extends Component<Props, State> {
           description={widget.description}
           title={widget.title}
         />
-      </StyledWidgetCardContextMenuContainer>
+      </WidgetCardContextMenuContainer>
     );
   }
 
@@ -493,7 +493,7 @@ const ErrorCard = styled(Placeholder)`
   margin-bottom: ${space(2)};
 `;
 
-const StyledWidgetCardContextMenuContainer = styled('div')`
+export const WidgetCardContextMenuContainer = styled('div')`
   opacity: 1;
   transition: opacity 0.1s;
 `;
@@ -512,7 +512,7 @@ export const WidgetCardPanel = styled(Panel, {
   flex-direction: column;
 
   &:not(:hover):not(:focus-within) {
-    ${StyledWidgetCardContextMenuContainer} {
+    ${WidgetCardContextMenuContainer} {
       opacity: 0;
       clip: rect(0 0 0 0);
       clip-path: inset(50%);