todo,todo-backend: tweak todo item model and table

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

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) {

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 = {

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 = {

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<TodoItem>[] = [
-  { title: 'Text', field: 'text' },
-  { title: 'Author', field: 'author' },
   {
-    title: 'View',
-    field: 'viewUrl',
-    render({ viewUrl }) {
-      return (
-        <a target="_blank" href={viewUrl}>
-          {viewUrl}
-        </a>
-      );
-    },
+    title: 'Text',
+    width: '100%',
+    highlight: true,
+    render: ({ text }) => <OverflowTooltip text={text} />,
   },
   {
-    title: 'Edit',
-    field: 'editUrl',
-    render({ editUrl }) {
-      return (
-        <a target="_blank" href={editUrl}>
-          {editUrl}
-        </a>
-      );
-    },
+    title: 'File',
+    width: '80%',
+    render: ({ viewUrl, repoFilePath }) =>
+      viewUrl ? (
+        <Link to={viewUrl} target="_blank">
+          <OverflowTooltip text={repoFilePath} />
+        </Link>
+      ) : (
+        <OverflowTooltip text={repoFilePath} />
+      ),
+  },
+  {
+    title: 'Author',
+    field: 'author',
+    width: '20%',
+    render: ({ author }) => <OverflowTooltip text={author} />,
   },
 ];
 
@@ -77,6 +84,7 @@ export const TodoList = () => {
       options={{
         search: false,
         pageSize,
+        padding: 'dense',
       }}
       page={page}
       columns={columns}