diff --git a/.changeset/blue-ligers-allow.md b/.changeset/blue-ligers-allow.md new file mode 100644 index 0000000000..923a5a31dc --- /dev/null +++ b/.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. diff --git a/plugins/code-coverage/src/components/FileExplorer/FileExplorer.test.tsx b/plugins/code-coverage/src/components/FileExplorer/FileExplorer.test.tsx index 4163b22ac1..b59b3ad1fd 100644 --- a/plugins/code-coverage/src/components/FileExplorer/FileExplorer.test.tsx +++ b/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(); + }); +}); diff --git a/plugins/code-coverage/src/components/FileExplorer/FileExplorer.tsx b/plugins/code-coverage/src/components/FileExplorer/FileExplorer.tsx index 790de6e00f..3d41a1ff64 100644 --- a/plugins/code-coverage/src/components/FileExplorer/FileExplorer.tsx +++ b/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(); @@ -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[] = [ @@ -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'}