Merge pull request #9292 from RoadieHQ/code-coverage-plugin-fix-explo…

…re-files-breadcrumb

Code coverage plugin - fix explore files breadcrumbs bug

.changeset/blue-ligers-allow.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-code-coverage': patch
+---
+
+Fixed a bug in the FileExplorer component which made it impossible to navigate upwards to a containing folder by clicking on the folder breadcrumb.

plugins/code-coverage/src/components/FileExplorer/FileExplorer.test.tsx

@@ -13,7 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { groupByPath, buildFileStructure } from './FileExplorer';
+import {
+  groupByPath,
+  buildFileStructure,
+  getObjectsAtPath,
+} from './FileExplorer';
 
 const dummyFiles = [
   {
@@ -207,6 +211,28 @@ const coverageTableRowResults = {
   path: '',
 };
 
+const pathTestLeaf = {
+  files: [],
+  coverage: 1,
+  missing: 3,
+  tracked: 2,
+  path: 'file5',
+};
+
+const dummyFilesPathTest = {
+  files: [
+    ...dummyFiles,
+    {
+      ...pathTestLeaf,
+      filename: 'dir3/dir7/file5',
+    },
+  ],
+  coverage: 1,
+  missing: 1,
+  tracked: 1,
+  path: '',
+};
+
 describe('groupByPath function', () => {
   it('should group files by their root directory,as per their filename', () => {
     expect(groupByPath(dummyFiles)).toStrictEqual(dummyDataGroupedByPath);
@@ -220,3 +246,19 @@ describe('buildFileStructure function', () => {
     );
   });
 });
+
+describe('getObjectsAtPath function', () => {
+  const structure = buildFileStructure(dummyFilesPathTest);
+
+  it('should return the the dirs/files at the given path', () => {
+    expect(getObjectsAtPath(structure, ['dir3', 'dir7'])).toStrictEqual([
+      pathTestLeaf,
+    ]);
+  });
+
+  it('should return undefined for a nonexistent path', () => {
+    expect(
+      getObjectsAtPath(structure, ['dir3', 'doesnt-exist']),
+    ).toBeUndefined();
+  });
+});

plugins/code-coverage/src/components/FileExplorer/FileExplorer.tsx

@@ -131,6 +131,17 @@ const formatInitialData = (value: any) => {
   });
 };
 
+export const getObjectsAtPath = (
+  curData: CoverageTableRow | undefined,
+  path: string[],
+): CoverageTableRow[] | undefined => {
+  let data = curData?.files;
+  for (const fragment of path) {
+    data = data?.find(d => d.path === fragment)?.files;
+  }
+  return data;
+};
+
 export const FileExplorer = () => {
   const { entity } = useEntity();
   const [curData, setCurData] = useState<CoverageTableRow | undefined>();
@@ -175,14 +186,10 @@ export const FileExplorer = () => {
     }
   };
 
-  const moveUpIntoPath = (path: string) => {
-    const pathArray = path.split('/').filter(p => p.length);
-    let data = curData?.files;
-    pathArray.forEach(p => {
-      data = data?.find(d => d.path === p)?.files;
-    });
-    setCurPath(path);
-    setTableData(data);
+  const moveUpIntoPath = (idx: number) => {
+    const path = curPath.split('/').slice(0, idx + 1);
+    setCurPath(path.join('/'));
+    setTableData(getObjectsAtPath(curData, path.slice(1)));
   };
 
   const columns: TableColumn<CoverageTableRow>[] = [
@@ -270,8 +277,8 @@ export const FileExplorer = () => {
                   color: `${idx !== lastPathElementIndex && 'lightblue'}`,
                   cursor: `${idx !== lastPathElementIndex && 'pointer'}`,
                 }}
-                onKeyDown={() => moveUpIntoPath(pathElement)}
-                onClick={() => moveUpIntoPath(pathElement)}
+                onKeyDown={() => moveUpIntoPath(idx)}
+                onClick={() => moveUpIntoPath(idx)}
               >
                 {pathElement || 'root'}
               </div>