fix(FunctionDetailsPanel): Fix start ellipsis for file names containi…

…ng non-alpha chars (#373) * fix(FunctionDetailsPanel): Fix ellipsis for long file names containing non-alpha chars * test(EndToEnd): Fix GitHub integration tests * chore: Add comment
grafana · Feb 3, 2025 · f79a1b7 · f79a1b7
1 parent a46559f
commit f79a1b7
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/e2e/tests/flame-graph-view/github-integration.spec.ts b/e2e/tests/flame-graph-view/github-integration.spec.ts
@@ -18,7 +18,8 @@ test.describe('Flame graph view', () => {
     const nodePosition = { x: 30, y: 30 };
     const functionName = 'github.com/grafana/dskit/services.(*BasicService).main';
     const startLine = '153';
-    const file = 'github.com/grafana/dskit@v0.0.0-20231221015914-de83901bf4d6/services/basic_service.go';
+    // see ellipsis hack in SceneFunctionDetailsPanel.tsx
+    const fileName = '‎github.com/grafana/dskit@v0.0.0-20231221015914-de83901bf4d6/services/basic_service.go';
 
     test('When clicking on a flame graph node and then "Function details", it opens a details panel', async ({
       exploreProfilesPage,
@@ -61,7 +62,7 @@ test.describe('Flame graph view', () => {
 
       const filePathRow = detailsPanel.getByTestId('row-file-path');
       await expect(filePathRow.getByText('File')).toBeVisible();
-      await expect(filePathRow.locator('span')).toHaveText(file);
+      await expect(filePathRow.locator('span')).toHaveText(fileName);
 
       const repositoryRow = detailsPanel.getByTestId('row-repository');
       await expect(repositoryRow.getByText('Repository')).toBeVisible();

diff --git a/...ploreServiceFlameGraph/components/SceneFunctionDetailsPanel/SceneFunctionDetailsPanel.tsx b/...ploreServiceFlameGraph/components/SceneFunctionDetailsPanel/SceneFunctionDetailsPanel.tsx
@@ -171,7 +171,8 @@ export class SceneFunctionDetailsPanel extends SceneObjectBase<SceneFunctionDeta
                 {data.functionDetails.fileName ? (
                   <>
                     <Tooltip content={data.functionDetails.fileName} placement="top">
-                      <span className={styles.textValue}>{formatFileName(data.functionDetails.fileName)}</span>
+                      {/* adding LRM to prevent ellipsis with RTL to fail when the file name starts with non-alpha chars (e.g. "$")  */}
+                      <span className={styles.textValue}>&lrm;{formatFileName(data.functionDetails.fileName)}</span>
                     </Tooltip>
                     <IconButton
                       name="clipboard-alt"
@@ -266,9 +267,10 @@ const getStyles = (theme: GrafanaTheme2) => ({
     }
   `,
   textValue: css`
+    // hack to have the ellipsis appear at the start of the string
+    direction: rtl;
     text-overflow: ellipsis;
     overflow: hidden;
-    direction: rtl;
     white-space: nowrap;
   `,
 });