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

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

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}