fix(scorecard): fix tooltip display and error title clipping for some languages

workspaces/scorecard/.changeset/dirty-turtles-pick.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-scorecard': patch
+---
+
+Fix tooltip display and error title clipping for some languages

workspaces/scorecard/packages/app/e2e-tests/pages/HomePage.ts

@@ -93,7 +93,7 @@ export class HomePage {
   ) {
     const card = this.getCard(metricId);
     await expect(card).toContainText(
-      this.translations.errors.missingPermissionMessage,
+      this.translations.errors.missingPermission,
     );
   }
 
@@ -102,8 +102,6 @@ export class HomePage {
   ) {
     const card = this.getCard(metricId);
     await expect(card).toContainText(this.translations.errors.noDataFound);
-    await expect(card).toContainText(
-      this.translations.errors.noDataFoundMessage,
-    );
+    await expect(card).toContainText(this.translations.errors.noDataFound);
   }
 }

workspaces/scorecard/plugins/scorecard/src/components/Common/ErrorTooltip.tsx

@@ -0,0 +1,40 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import MuiTooltip from '@mui/material/Tooltip';
+
+export const ErrorTooltip = ({
+  title,
+  tooltipPosition,
+}: {
+  title: string | undefined;
+  tooltipPosition: { x: number; y: number } | undefined;
+}) => {
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: tooltipPosition?.x,
+        top: tooltipPosition?.y,
+      }}
+    >
+      <MuiTooltip open title={title} placement="bottom" arrow>
+        {/* Anchor for tooltip so it appears under the pie chart */}
+        <div style={{ visibility: 'hidden' }}>Tooltip</div>
+      </MuiTooltip>
+    </div>
+  );
+};

workspaces/scorecard/plugins/scorecard/src/components/Common/__tests__/ErrorTooltip.test.tsx

@@ -0,0 +1,73 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { render, screen } from '@testing-library/react';
+
+import { ErrorTooltip } from '../ErrorTooltip';
+
+// MUI Tooltip uses portals + transitions
+// disable them for stable tests
+jest.mock('@mui/material/Tooltip', () => {
+  return ({ children, title, open }: any) => (
+    <div>
+      {children}
+      {open && title && <span data-testid="tooltip">{title}</span>}
+    </div>
+  );
+});
+
+describe('ErrorTooltip Component', () => {
+  it('should render tooltip when title is provided', () => {
+    render(
+      <ErrorTooltip
+        title="Error occurred"
+        tooltipPosition={{ x: 100, y: 200 }}
+      />,
+    );
+
+    expect(screen.getByTestId('tooltip')).toHaveTextContent('Error occurred');
+  });
+
+  it('should position tooltip correctly', () => {
+    const { container } = render(
+      <ErrorTooltip title="Position test" tooltipPosition={{ x: 50, y: 75 }} />,
+    );
+
+    const wrapper = container.firstChild as HTMLElement;
+
+    expect(wrapper).toHaveStyle({
+      left: '50px',
+      top: '75px',
+      position: 'absolute',
+    });
+  });
+
+  it('should not render tooltip text when title is undefined', () => {
+    render(
+      <ErrorTooltip title={undefined} tooltipPosition={{ x: 10, y: 10 }} />,
+    );
+
+    expect(screen.queryByTestId('tooltip')).not.toBeInTheDocument();
+  });
+
+  it('should render even if tooltipPosition is undefined', () => {
+    const { container } = render(
+      <ErrorTooltip title="No position" tooltipPosition={undefined} />,
+    );
+
+    expect(container.firstChild).toBeInTheDocument();
+  });
+});