Implement custom no data component for all react tables (#7557)

Author: ch-iv

Changelog.md

@@ -6,6 +6,7 @@
 
 ### ✨ New features and improvements
 - Improved layout and labeling in the assignment settings form for both standard and timed assessments. (#7531)
+- Design improvement of tables when the data is empty. (#7557)
 - Improved Assignment view for students (#7533)
 - Maintain font size in grading view (#7525)
 

app/assets/stylesheets/common/core.scss

@@ -457,6 +457,13 @@ th.required::after {
   width: 100%;
 }
 
+.rt-no-data {
+  background-color: $background-support;
+  margin: 0;
+  padding: 1em 0;
+  text-align: center;
+}
+
 // Styling patches for react-keyed-file-browser
 .div.rendered-react-keyed-file-browser div.action-bar ul.item-actions {
   overflow: auto;

app/javascript/Components/Helpers/table_helpers.jsx

@@ -229,3 +229,7 @@ export function getMarkingStates(data) {
   });
   return markingStates;
 }
+
+export function customNoDataComponent({children}) {
+  return <p className="rt-no-data">{children}</p>;
+}

app/javascript/Components/__tests__/default_react_table.test.jsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import {render, screen, fireEvent, within} from "@testing-library/react";
+import ReactTable from "react-table";
+
+describe("Default React Table", () => {
+  it("shows the default no data text when no data is provided", async () => {
+    render(<ReactTable columns={[]} data={[]} />);
+    await screen.findByText("No rows found");
+  });
+
+  it("shows a custom no data text when set", async () => {
+    const customNoDataText = "custom no data text";
+    render(<ReactTable columns={[]} data={[]} noDataText={customNoDataText} />);
+    await screen.findByText(customNoDataText);
+  });
+});

app/javascript/Components/__tests__/instructor_table.test.jsx

@@ -87,7 +87,7 @@ describe("For the InstructorTable's display of instructors", () => {
     });
 
     it("No rows found is shown", async () => {
-      await screen.findByText("No rows found");
+      await screen.findByText(I18n.t("instructors.empty_table"));
     });
   });
 });

app/javascript/Components/__tests__/student_table.test.jsx

@@ -264,7 +264,7 @@ describe("For the StudentTable's display of students", () => {
     });
 
     it("No rows found is shown", async () => {
-      await screen.findByText("No rows found");
+      await screen.findByText(I18n.t("students.empty_table"));
     });
   });
 

app/javascript/Components/__tests__/ta_table.test.jsx

@@ -99,7 +99,7 @@ describe("For the TATable's display of TAs", () => {
     });
 
     it("No rows found is shown", async () => {
-      await screen.findByText("No rows found");
+      await screen.findByText(I18n.t("tas.empty_table"));
     });
   });
 

app/javascript/Components/instructor_table.jsx

@@ -100,6 +100,7 @@ class InstructorTable extends React.Component {
         ]}
         filterable
         loading={this.state.loading}
+        noDataText={I18n.t("instructors.empty_table")}
       />
     );
   }

app/javascript/Components/student_table.jsx

@@ -221,6 +221,7 @@ class RawStudentTable extends React.Component {
           ]}
           filterable
           loading={loading}
+          noDataText={I18n.t("students.empty_table")}
           {...this.props.getCheckboxProps()}
         />
       </div>
@@ -306,6 +307,7 @@ class StudentsActionBox extends React.Component {
     );
   };
 }
+
 StudentsActionBox.propTypes = {
   onSubmit: PropTypes.func,
   disabled: PropTypes.bool,
@@ -321,8 +323,10 @@ RawStudentTable.propTypes = {
 };
 
 let StudentTable = withSelection(RawStudentTable);
+
 function makeStudentTable(elem, props) {
   const root = createRoot(elem);
   root.render(<StudentTable {...props} />);
 }
+
 export {StudentTable, StudentsActionBox, makeStudentTable};

app/javascript/Components/ta_table.jsx

@@ -127,6 +127,7 @@ class TATable extends React.Component {
         ]}
         filterable
         loading={this.state.loading}
+        noDataText={I18n.t("tas.empty_table")}
       />
     );
   }