fix: PR comments

Author: jesperhodge

src/taxonomy/tag-list/TagListTable.test.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { AxiosError } from 'axios';
 import {
   render,
   waitFor,
@@ -600,8 +601,7 @@ describe('<TagListTable />', () => {
 
       it('should show failure feedback when creating a duplicate root tag name', async () => {
         axiosMock.onPost(createTagUrl).reply(() => {
-          const error = new Error('Request failed with status code 400');
-          error.name = 'AxiosError';
+          const error = new AxiosError('Request failed with status code 400');
           error.response = {
             data: {
               tag: ['Tag with this name already exists'],
@@ -623,8 +623,7 @@ describe('<TagListTable />', () => {
 
       it('should keep the inline row and show a failure toast when save request fails', async () => {
         axiosMock.onPost(createTagUrl).reply(() => {
-          const error = new Error('Request failed with status code 500');
-          error.name = 'AxiosError';
+          const error = new AxiosError('Request failed with status code 500');
           error.response = {
             data: {
               tag: ['Internal server error'],

src/taxonomy/tag-list/UsageCountDisplay.tsx

@@ -6,13 +6,10 @@ import type {
   TreeRowData,
 } from '@src/taxonomy/tree-table/types';
 import { TagListRowData } from './types';
-
-const asTagListRowData = (row: Row<TreeRowData>): TagListRowData => (
-  row.original as unknown as TagListRowData
-);
+import { getTagListRowData } from './utils';
 
 const UsageCountDisplay = ({ row }: { row: Row<TreeRowData>; }) => {
-  const count = asTagListRowData(row).usageCount ?? 0;
+  const count = getTagListRowData(row).usageCount ?? 0;
 
   if (count <= 0) {
     return null;

src/taxonomy/tag-list/tagColumns.tsx

@@ -20,13 +20,10 @@ import { TagListRowData } from './types';
 import messages from './messages';
 import OptionalExpandLink from './OptionalExpandLink';
 import UsageCountDisplay from './UsageCountDisplay';
+import { getTagListRowData } from './utils';
 
 const EDITABLE_COLUMNS = ['value'];
 
-const asTagListRowData = (row: Row<TreeRowData>): TagListRowData => (
-  row.original as unknown as TagListRowData
-);
-
 interface GetColumnsArgs {
   setIsCreatingTopTag: (isCreating: boolean) => void;
   setCreatingParentId: (id: RowId | null) => void;
@@ -157,7 +154,7 @@ function getColumns({
       cell: ({ row }) => {
         const {
           value,
-        } = asTagListRowData(row);
+        } = getTagListRowData(row);
 
         return (
           <span className="d-flex align-items-center gap-2">
@@ -187,14 +184,14 @@ function getColumns({
         />
       ),
       cell: ({ row }) => {
-        const rowData = asTagListRowData(row);
+        const rowData = getTagListRowData(row);
 
         if (rowData.isNew || rowData.isEditing) {
           return <div className="d-flex gap-2" />;
         }
 
         const disableAddSubtag = hasOpenDraft || !canAddTag;
-        const disableEditTag = hasOpenDraft || row.original.canChangeTag === false;
+        const disableEditTag = hasOpenDraft || rowData.canChangeTag === false;
 
         const startSubtagDraft = () => {
           onStartDraft();

src/taxonomy/tag-list/utils.ts

@@ -0,0 +1,12 @@
+import { Row } from '@openedx/paragon';
+import { TreeRowData } from '@src/taxonomy/tree-table/types';
+import { TagListRowData } from './types';
+
+/** getTagListRowData
+ *
+ * Minimal getter function for `row.original`. Mainly because the naming of `original` is not expressive,
+ * and it needs to be cast to the correct type.
+*/
+export const getTagListRowData = (row: Row<TreeRowData>): TagListRowData => (
+  row.original as unknown as TagListRowData
+);

src/taxonomy/tree-table/DraftRow.tsx

@@ -69,12 +69,10 @@ const DraftRow: React.FC<DraftRowProps> = ({
     }
   };
 
-  const indentClass = indent > 0 ? `tree-table-indent tree-table-indent-${indent}` : '';
-
   return (
     <tr id={rowId} data-testid={rowTestId}>
-      <td colSpan={1} className="py-2 pr-2 pl-0">
-        <div className={indentClass}>
+      <td className="py-2 pr-2 pl-0">
+        <div className={`tree-table-indent-${indent}`}>
           <EditableCell
             initialValue={initialValue}
             errorMessage={draftError}
@@ -85,12 +83,11 @@ const DraftRow: React.FC<DraftRowProps> = ({
           />
         </div>
       </td>
-      <td colSpan={1} aria-label="Usage Count">
+      <td aria-label="Usage Count">
         {row ? <UsageCountDisplay row={row} /> : null}
       </td>
       <td
-        colSpan={1}
-        className="tree-table-create-row-actions-cell p-2 align-top"
+        className="tree-table-create-row-actions-cell p-2"
       >
         <span className="d-flex justify-content-end">
           <span className="mr-2">

src/taxonomy/tree-table/TableView.scss

@@ -10,11 +10,7 @@
   overflow-wrap: anywhere;
 }
 
-.tree-table-indent {
-  padding-inline-start: var(--pgn-spacing-spacer-base);
-}
-
-@for $depth from 2 through 10 {
+@for $depth from 0 through 10 {
   .tree-table-indent-#{$depth} {
     padding-inline-start: calc(var(--pgn-spacing-spacer-base) * #{$depth});
   }