16015104902

Committed 02 Jul 2025 03:05AM UTC coverage: 92.014% (+0.02%) from 91.993%

Build # 16015104902

Build Type

Pull #7589

github

Committed by

web-flow

Commit Message

Merge eddfc458c into 5e74b236d

Pull Request Pull Request #7589: Migrate the instructor table to react-table v8

Run Details

649 of 1383 branches covered (46.93%)

Branch coverage included in aggregate %.

11 of 11 new or added lines in 1 file covered. (100.0%)

1 existing line in 1 file now uncovered.

42004 of 44972 relevant lines covered (93.4%)

118.42 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

88.89

/app/javascript/Components/instructor_table.jsx

import React from "react";
import {createRoot} from "react-dom/client";
import PropTypes from "prop-types";

import Table from "./table";
import {createColumnHelper} from "@tanstack/react-table";

class InstructorTable extends React.Component {
  constructor() {
    super();
    this.state = {
      data: [],
      loading: true,
    };
    this.fetchData = this.fetchData.bind(this);

    const columnHelper = createColumnHelper();
    this.columns = [
      columnHelper.accessor("user_name", {
        header: () => I18n.t("activerecord.attributes.user.user_name"),
      }),
      columnHelper.accessor("first_name", {
        header: () => I18n.t("activerecord.attributes.user.first_name"),
      }),
      columnHelper.accessor("last_name", {
        header: () => I18n.t("activerecord.attributes.user.last_name"),
      }),
      columnHelper.accessor("email", {
        header: () => I18n.t("activerecord.attributes.user.email"),
      }),
      columnHelper.accessor("hidden", {
        header: () => I18n.t("roles.active") + "?",
        filterFn: "equalsString",
        meta: {
          filterVariant: "select",
        },
      }),
      columnHelper.accessor("id", {
        id: "id",
        enableSorting: false,
        header: () => I18n.t("actions"),
        cell: info => (
          <a href={Routes.edit_course_instructor_path(this.props.course_id, info.getValue())}>
            {I18n.t("edit")}
          </a>
        ),
      }),
    ];
  }

  componentDidMount() {
    this.fetchData().then(data => this.setState({data: this.processData(data)}));
  }

  fetchData() {
    return fetch(Routes.course_instructors_path(this.props.course_id), {
      headers: {
        Accept: "application/json",
      },
    })
      .then(response => {
        if (response.ok) {
          return response.json();
        }
      })
      .then(json => json.data);
  }

  processData(data) {
    data.forEach(row => (row.hidden = I18n.t(row.hidden ? "roles.inactive" : "roles.active")));
    return data;
  }

  render() {
    return (
      <Table
        data={this.state.data}
        columns={this.columns}
        noDataText={I18n.t("instructors.empty_table")}
      />
    );
  }
}

InstructorTable.propTypes = {
  course_id: PropTypes.number,
};

function makeInstructorTable(elem, props) {
  const root = createRoot(elem);
  root.render(<InstructorTable {...props} />);
}

export {makeInstructorTable, InstructorTable};

1	import React from "react";
2	import {createRoot} from "react-dom/client";
3	import PropTypes from "prop-types";
4
5	import Table from "./table";
6	import {createColumnHelper} from "@tanstack/react-table";
7
8	class InstructorTable extends React.Component {
9	constructor() {
10	super();	3✔
11	this.state = {	2✔
12	data: [],
13	loading: true,
14	};
15	this.fetchData = this.fetchData.bind(this);	2✔
16
17	const columnHelper = createColumnHelper();	2✔
18	this.columns = [	2✔
19	columnHelper.accessor("user_name", {
20	header: () => I18n.t("activerecord.attributes.user.user_name"),	5✔
21	}),
22	columnHelper.accessor("first_name", {
23	header: () => I18n.t("activerecord.attributes.user.first_name"),	5✔
24	}),
25	columnHelper.accessor("last_name", {
26	header: () => I18n.t("activerecord.attributes.user.last_name"),	5✔
27	}),
28	columnHelper.accessor("email", {
29	header: () => I18n.t("activerecord.attributes.user.email"),	5✔
30	}),
31	columnHelper.accessor("hidden", {
32	header: () => I18n.t("roles.active") + "?",	5✔
33	filterFn: "equalsString",
34	meta: {
35	filterVariant: "select",
36	},
37	}),
38	columnHelper.accessor("id", {
39	id: "id",
40	enableSorting: false,
41	header: () => I18n.t("actions"),	5✔
42	cell: info => (
43	<a href={Routes.edit_course_instructor_path(this.props.course_id, info.getValue())}>	4✔
44	{I18n.t("edit")}
45	</a>
46	),
47	}),
48	];
49	}
50
51	componentDidMount() {
52	this.fetchData().then(data => this.setState({data: this.processData(data)}));	2✔
53	}
54
55	fetchData() {
56	return fetch(Routes.course_instructors_path(this.props.course_id), {	2✔
57	headers: {
58	Accept: "application/json",
59	},
60	})
61	.then(response => {
62	if (response.ok) {	2!
63	return response.json();	2✔
64	}
65	})
66	.then(json => json.data);	2✔
67	}
68
69	processData(data) {
70	data.forEach(row => (row.hidden = I18n.t(row.hidden ? "roles.inactive" : "roles.active")));	2✔
71	return data;	2✔
72	}
73
74	render() {
75	return (	4✔
76	<Table
77	data={this.state.data}
78	columns={this.columns}
79	noDataText={I18n.t("instructors.empty_table")}
80	/>
81	);
82	}
83	}
84
85	InstructorTable.propTypes = {	1✔
86	course_id: PropTypes.number,
87	};
88
89	function makeInstructorTable(elem, props) {
UNCOV 90	const root = createRoot(elem);	×
91	root.render(<InstructorTable {...props} />);	×
92	}
93
94	export {makeInstructorTable, InstructorTable};

MarkUsProject / Markus / 16015104902

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous