Design improvement for student, ta, and instructor tables

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")}
       />
     );
   }

app/javascript/common/react_config.jsx

@@ -1,7 +1,12 @@
 import {ReactTableDefaults} from "react-table";
 import {I18n} from "i18n-js";
 import translations from "translations.json";
-import {defaultSort, stringFilterMethod, textFilter} from "../Components/Helpers/table_helpers";
+import {
+  defaultSort,
+  stringFilterMethod,
+  textFilter,
+  customNoDataComponent,
+} from "../Components/Helpers/table_helpers";
 
 const i18n = new I18n(translations);
 
@@ -15,6 +20,7 @@ Object.assign(ReactTableDefaults, {
   defaultSortMethod: defaultSort,
   defaultFilterMethod: stringFilterMethod,
   FilterComponent: textFilter,
+  NoDataComponent: customNoDataComponent,
 });
 
 Object.assign(ReactTableDefaults.column, {

config/locales/views/users/en.yml

@@ -2,6 +2,7 @@
 en:
   instructors:
     edit: Edit an Instructor
+    empty_table: No instructors found
     help:
       manage_instructors: Administrators are usually instructors. They have full control over the MarkUs instance, including making assignments, assigning graders, and releasing marks.
     new: Add an Instructor
@@ -12,6 +13,7 @@ en:
   students:
     display_inactive: Display inactive students
     edit: Edit a Student
+    empty_table: No students found
     errors:
       group_creation_failure: Sorry! For some reason, your group could not be created. Please wait a few seconds, then hit refresh to try again. If you come back to this page, you should inform the course instructor.
       grouping_creation_failure: Sorry! For some reason, your grouping could not be created. Please wait a few seconds, and hit refresh to try again. If you come back to this page, you should inform the course instructor.
@@ -33,6 +35,7 @@ en:
   tas:
     display_inactive: Display inactive graders
     edit: Edit a Grader
+    empty_table: No graders found
     help:
       manage_graders: Create graders.
     new: Add a Grader