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 for student, ta, and instructor tables when the table is empty. (#7557)
 
 ### 🐛 Bug fixes
 

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/__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

@@ -4,6 +4,7 @@ import PropTypes from "prop-types";
 
 import ReactTable from "react-table";
 import {selectFilter} from "./Helpers/table_helpers";
+import {tableNoDataComponent} from "./table_no_data";
 
 class InstructorTable extends React.Component {
   constructor() {
@@ -100,6 +101,7 @@ class InstructorTable extends React.Component {
         ]}
         filterable
         loading={this.state.loading}
+        NoDataComponent={() => tableNoDataComponent(I18n.t("instructors.empty_table"))}
       />
     );
   }

app/javascript/Components/student_table.jsx

@@ -4,6 +4,7 @@ import PropTypes from "prop-types";
 
 import {CheckboxTable, withSelection} from "./markus_with_selection_hoc";
 import {selectFilter} from "./Helpers/table_helpers";
+import {tableNoDataComponent} from "./table_no_data";
 
 class RawStudentTable extends React.Component {
   constructor() {
@@ -221,6 +222,7 @@ class RawStudentTable extends React.Component {
           ]}
           filterable
           loading={loading}
+          NoDataComponent={() => tableNoDataComponent(I18n.t("students.empty_table"))}
           {...this.props.getCheckboxProps()}
         />
       </div>
@@ -306,6 +308,7 @@ class StudentsActionBox extends React.Component {
     );
   };
 }
+
 StudentsActionBox.propTypes = {
   onSubmit: PropTypes.func,
   disabled: PropTypes.bool,
@@ -321,8 +324,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

@@ -4,6 +4,7 @@ import PropTypes from "prop-types";
 
 import ReactTable from "react-table";
 import {selectFilter} from "./Helpers/table_helpers";
+import {tableNoDataComponent} from "./table_no_data";
 
 class TATable extends React.Component {
   constructor() {
@@ -127,6 +128,7 @@ class TATable extends React.Component {
         ]}
         filterable
         loading={this.state.loading}
+        NoDataComponent={() => tableNoDataComponent(I18n.t("tas.empty_table"))}
       />
     );
   }

app/javascript/Components/table_no_data.jsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const tableNoDataComponent = empty_table_message => {
+  return <p className="rt-no-data">{empty_table_message}</p>;
+};

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