diff --git a/plugins/todo-backend/src/lib/TodoReader/TodoScmReader.ts b/plugins/todo-backend/src/lib/TodoReader/TodoScmReader.ts index 8caa853c6b..919cf3dd18 100644 --- a/plugins/todo-backend/src/lib/TodoReader/TodoScmReader.ts +++ b/plugins/todo-backend/src/lib/TodoReader/TodoScmReader.ts @@ -30,7 +30,7 @@ import { Config } from '@backstage/config'; type TodoParser = (ctx: { content: string; path: string; -}) => (TodoItem & { line: number })[]; +}) => { text: string; author?: string; lineNumber: number }[]; type Options = { logger: Logger; @@ -52,7 +52,7 @@ const defaultTodoParser: TodoParser = ({ content, path }) => { return comments.map(comment => ({ text: comment.text, author: comment.ref, - line: comment.line, + lineNumber: comment.line, })); } catch /* ignore unsupported extensions */ { return []; @@ -119,18 +119,14 @@ export class TodoScmReader implements TodoReader { base: url, }); - let editUrl: string | undefined = this.integrations.resolveEditUrl( - viewUrl, - ); - if (editUrl === viewUrl) { - editUrl = undefined; - } - todos.push( - ...items.map(item => ({ - ...item, - editUrl, - viewUrl: item.line ? `${viewUrl}#L${item.line}` : viewUrl, + ...items.map(({ lineNumber, text, author }) => ({ + text, + author, + lineNumber, + repoFilePath: file.path, + viewUrl: + lineNumber === undefined ? viewUrl : `${viewUrl}#L${lineNumber}`, })), ); } catch (error) { diff --git a/plugins/todo-backend/src/lib/TodoReader/types.ts b/plugins/todo-backend/src/lib/TodoReader/types.ts index 46e7f1dcfa..499d3ac843 100644 --- a/plugins/todo-backend/src/lib/TodoReader/types.ts +++ b/plugins/todo-backend/src/lib/TodoReader/types.ts @@ -15,10 +15,20 @@ */ export type TodoItem = { + /** The contents of the TODO comment */ text: string; + + /** References author, if any */ author?: string; + + /** URL used to view the file */ viewUrl?: string; - editUrl?: string; + + /** The line number of the file that the TODO occurs at */ + lineNumber?: number; + + /** The path of the file containing the TODO within the repo */ + repoFilePath?: string; }; export type ReadTodosOptions = { diff --git a/plugins/todo/src/api/types.ts b/plugins/todo/src/api/types.ts index 890bc50731..759df24b60 100644 --- a/plugins/todo/src/api/types.ts +++ b/plugins/todo/src/api/types.ts @@ -18,10 +18,20 @@ import { createApiRef } from '@backstage/core'; import { Entity } from '@backstage/catalog-model'; export type TodoItem = { + /** The contents of the TODO comment */ text: string; + + /** References author, if any */ author?: string; + + /** URL used to view the file */ viewUrl?: string; - editUrl?: string; + + /** The line number of the file that the TODO occurs at */ + lineNumber?: number; + + /** The path of the file containing the TODO within the repo */ + repoFilePath?: string; }; export type TodoListOptions = { diff --git a/plugins/todo/src/components/TodoList/TodoList.tsx b/plugins/todo/src/components/TodoList/TodoList.tsx index df0413107a..1201dca4fd 100644 --- a/plugins/todo/src/components/TodoList/TodoList.tsx +++ b/plugins/todo/src/components/TodoList/TodoList.tsx @@ -14,7 +14,14 @@ * limitations under the License. */ -import { Progress, Table, TableColumn, useApi } from '@backstage/core'; +import { + Progress, + Table, + TableColumn, + useApi, + OverflowTooltip, + Link, +} from '@backstage/core'; import { useEntity } from '@backstage/plugin-catalog-react'; import Alert from '@material-ui/lab/Alert'; import React, { useState } from 'react'; @@ -23,29 +30,29 @@ import { todoApiRef } from '../../api'; import { TodoItem } from '../../api/types'; const columns: TableColumn[] = [ - { title: 'Text', field: 'text' }, - { title: 'Author', field: 'author' }, { - title: 'View', - field: 'viewUrl', - render({ viewUrl }) { - return ( - - {viewUrl} - - ); - }, + title: 'Text', + width: '100%', + highlight: true, + render: ({ text }) => , }, { - title: 'Edit', - field: 'editUrl', - render({ editUrl }) { - return ( - - {editUrl} - - ); - }, + title: 'File', + width: '80%', + render: ({ viewUrl, repoFilePath }) => + viewUrl ? ( + + + + ) : ( + + ), + }, + { + title: 'Author', + field: 'author', + width: '20%', + render: ({ author }) => , }, ]; @@ -77,6 +84,7 @@ export const TodoList = () => { options={{ search: false, pageSize, + padding: 'dense', }} page={page} columns={columns}