29673128555

Committed 19 Jul 2026 04:18AM UTC coverage: 90.37% (-0.04%) from 90.411%

Build # 29673128555

Build Type

Pull #8068

github

Committed by

web-flow

Commit Message

Merge dccb0480f into 59d4c37c6

Pull Request Pull Request #8068: Groups tab tables refactor

Coverage Stats

1219 of 2484 branches covered (49.07%)

Branch coverage included in aggregate %.

38 of 78 new or added lines in 3 files covered. (48.72%)

18 existing lines in 1 file now uncovered.

47355 of 51266 relevant lines covered (92.37%)

127.93 hits per line

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

34.39

/app/javascript/Components/Helpers/table_helpers.jsx

import {Grid} from "react-loader-spinner";

/**
 * @file
 * Provides generic helper functions and components for react-table tables.
 */

export function customLoadingProp({loading}) {
  if (loading) {
    return (
      <div className="loading-spinner" data-testid="loading-spinner">
        <Grid
          visible={true}
          height="25"
          width="25"
          color="#31649B"
          aria-label="grid-loading"
          radius="12.5"
          wrapperStyle={{}}
          wrapperClass="grid-wrapper"
        />
      </div>
    );
  }

  return null;
}

export function defaultSort(a, b) {
  // Sort values, putting undefined/nulls below all other values.
  // Based on react-table v6 defaultSortMethod (https://github.com/tannerlinsley/react-table/tree/v6/),
  // but not string-based.
  if ((a === undefined || a === null) && (b === undefined || b === null)) {
    return 0;
  } else if (a === undefined || a === null) {
    return -1;
  } else if (b === undefined || b === null) {
    return 1;
  } else {
    // force any string values to lowercase
    a = typeof a === "string" ? a.toLowerCase() : a;
    b = typeof b === "string" ? b.toLowerCase() : b;
    // Return either 1 or -1 to indicate a sort priority
    if (a > b) {
      return 1;
    }
    if (a < b) {
      return -1;
    }
    // returning 0, undefined or any falsey value will use subsequent sorts or
    // the index as a tiebreaker
    return 0;
  }
}

/**
 * Case insensitive, locale aware, string filter function
 */
export function stringFilterMethod(filter, row) {
  return String(row[filter.id])
    .toLocaleLowerCase()
    .includes(String(filter.value).toLocaleLowerCase());
}

export function dateSort(a, b) {
  /** Sort values as dates */
  if (!a && !b) {
    return 0;
  } else if (!a) {
    return -1;
  } else if (!b) {
    return 1;
  } else {
    let a_date = new Date(a);
    let b_date = new Date(b);
    return (a_date || 0) - (b_date || 0);
  }
}

export function durationSort(a, b) {
  /** Sort values as a duration in weeks, days, hours, etc. */
  a = [a.weeks || -1, a.days || -1, a.hours || -1, a.minutes || -1, a.seconds || -1];
  b = [b.weeks || -1, b.days || -1, b.hours || -1, b.minutes || -1, b.seconds || -1];
  if (a < b) {
    return 1;
  } else if (b < a) {
    return -1;
  } else {
    return 0;
  }
}

/**
 * Text-based search filter. Based on react-table's default search filter,
 * with an additional aria-label attribute.
 */
export function textFilter({filter, onChange, column}) {
  return (
    <input
      type="text"
      style={{
        width: "100%",
      }}
      placeholder={column.Placeholder}
      value={filter ? filter.value : ""}
      aria-label={`${I18n.t("search")} ${column.Header || ""}`}
      onChange={event => onChange(event.target.value)}
    />
  );
}

/**
 * Locale-aware substring match with optional case sensitivity. null/undefined
 * arguments are treated as the empty string, so callers do not have to guard
 * against them.
 */
export function caseSensitiveIncludes(haystack, needle, caseSensitive) {
  const a = haystack === null || haystack === undefined ? "" : String(haystack);
  const b = needle === null || needle === undefined ? "" : String(needle);
  if (caseSensitive) return a.includes(b);
  return a.toLocaleLowerCase().includes(b.toLocaleLowerCase());
}

/**
 * filterMethod that matches `row[filter.id]` against the filter's search text
 * with the filter's own case sensitivity. Pair with `caseSensitiveTextFilter`,
 * which stores `{filterValue, caseSensitive}` as the filter value. Empty
 * filters match every row.
 */
// export function caseSensitiveStringFilterMethod(filter, row) {
//   const {filterValue, caseSensitive} = filter.value;
//   if (!filterValue) return true;
//   return caseSensitiveIncludes(row[filter.id], filterValue, caseSensitive);
// }
export function caseSensitiveStringFilterMethod(row, columnId, filterValue) {
  if (!filterValue) return true;
  const {value, caseSensitive} = filterValue;
  if (!value) return true;
  return caseSensitiveIncludes(row.getValue(columnId), value, caseSensitive);
}

/**
 * A Filter component pairing a text input with an "Aa" checkbox toggle for
 * case-sensitive matching. It owns both the search text and the toggle,
 * passing them to the table together via `onChange` as
 * `{filterValue, caseSensitive}`. Matching defaults to case-insensitive. Pair
 * with `caseSensitiveStringFilterMethod`, or a custom filterMethod that reads
 * `filter.value.filterValue` and `filter.value.caseSensitive`.
 */
export function caseSensitiveTextFilter({filter, onChange, column}) {
  const filterValue = filter ? filter.value.filterValue : "";
  const caseSensitive = filter ? filter.value.caseSensitive : false;

  return (
    <div style={{display: "flex", alignItems: "center", gap: "4px"}}>
      <input
        type="text"
        style={{flex: 1, minWidth: 0}}
        value={filterValue}
        aria-label={`${I18n.t("search")} ${column.Header || ""}`}
        onChange={event => onChange({filterValue: event.target.value, caseSensitive})}
      />
      <label
        title={I18n.t("table.case_sensitive_search")}
        style={{display: "flex", alignItems: "center", cursor: "pointer"}}
      >
        <input
          type="checkbox"
          checked={caseSensitive}
          onChange={event => onChange({filterValue, caseSensitive: event.target.checked})}
          aria-label={I18n.t("table.case_sensitive_search")}
          data-testid={`${column.id}_case_sensitive`}
        />
        <span style={{fontSize: "1.05em", marginLeft: "2px"}}>
          {I18n.t("table.case_sensitive_indicator")}
        </span>
      </label>
    </div>
  );
}

/**
 * Select-based search filter. Options are generated from the custom column attribute
 * filterOptions, which is a list of objects with keys "value" and "text".
 * A default "all" option is prepended to the list of options; the text can be
 * customized by setting the filterAllOptionText column attribute.
 */
export function selectFilter({filter, onChange, column}) {
  let options = (column.filterOptions || []).map(({value, text}) => (
    <option value={value} key={value}>
      {text}
    </option>
  ));
  let allOptionText = column.filterAllOptionText || I18n.t("all");
  options.unshift(
    <option value="all" key="all">
      {allOptionText}
    </option>
  );

  return (
    <select
      onChange={event => onChange(event.target.value)}
      style={{width: "100%"}}
      value={filter ? filter.value : "all"}
      aria-label={I18n.t("filter_by", {name: column.Header})}
    >
      {options}
    </select>
  );
}

export function markingStateColumn(marking_states, markingStateFilter, ...override_keys) {
  return {
    Header: I18n.t("activerecord.attributes.result.marking_state"),
    accessor: "marking_state",
    Cell: row => {
      let marking_state = "";
      switch (row.original.marking_state) {
        case "not_collected":
          marking_state = I18n.t("submissions.state.not_collected");
          break;
        case "incomplete":
          marking_state = I18n.t("submissions.state.in_progress");
          break;
        case "complete":
          marking_state = I18n.t("submissions.state.complete");
          break;
        case "released":
          marking_state = I18n.t("submissions.state.released");
          break;
        case "remark":
          marking_state = I18n.t("submissions.state.remark_requested");
          break;
        case "before_due_date":
          marking_state = I18n.t("submissions.state.before_due_date");
          break;
        default:
          // should not get here
          marking_state = row.original.marking_state;
      }
      return marking_state;
    },
    filterMethod: (filter, row) => {
      if (filter.value === "all") {
        return true;
      } else {
        return filter.value === row[filter.id];
      }
    },
    filterAllOptionText:
      I18n.t("all") +
      (markingStateFilter === "all"
        ? ` (${Object.values(marking_states).reduce((a, b) => a + b)})`
        : ""),
    filterOptions: [
      {
        value: "before_due_date",
        text:
          I18n.t("submissions.state.before_due_date") +
          (["before_due_date", "all"].includes(markingStateFilter)
            ? ` (${marking_states["before_due_date"]})`
            : ""),
      },
      {
        value: "not_collected",
        text:
          I18n.t("submissions.state.not_collected") +
          (["not_collected", "all"].includes(markingStateFilter)
            ? ` (${marking_states["not_collected"]})`
            : ""),
      },
      {
        value: "incomplete",
        text:
          I18n.t("submissions.state.in_progress") +
          (["incomplete", "all"].includes(markingStateFilter)
            ? ` (${marking_states["incomplete"]})`
            : ""),
      },
      {
        value: "complete",
        text:
          I18n.t("submissions.state.complete") +
          (["complete", "all"].includes(markingStateFilter)
            ? ` (${marking_states["complete"]})`
            : ""),
      },
      {
        value: "released",
        text:
          I18n.t("submissions.state.released") +
          (["released", "all"].includes(markingStateFilter)
            ? ` (${marking_states["released"]})`
            : ""),
      },
      {
        value: "remark",
        text:
          I18n.t("submissions.state.remark_requested") +
          (["remark", "all"].includes(markingStateFilter) ? ` (${marking_states["remark"]})` : ""),
      },
    ],
    Filter: selectFilter,
    ...override_keys,
  };
}

export function getMarkingStates(data) {
  const markingStates = {
    not_collected: 0,
    incomplete: 0,
    complete: 0,
    released: 0,
    remark: 0,
    before_due_date: 0,
  };
  data.forEach(row => {
    markingStates[row["marking_state"]] += 1;
  });
  return markingStates;
}

export function customNoDataComponent({children, loading}) {
  if (loading) {
    return null;
  }
  return <p className="rt-no-data">{children}</p>;
}

export function customGetNoDataProps(state) {
  return {loading: state.loading, data: state.data};
}

export function getTimeExtension(extension, timePeriods) {
  return timePeriods
    .map(key => {
      const val = extension[key];

      if (!val) {
        return null;
      }
      // don't build these strings dynamically or they will be missed by the i18n-tasks checkers.
      if (key === "weeks") {
        return `${val} ${I18n.t("durations.weeks", {count: val})}`;
      } else if (key === "days") {
        return `${val} ${I18n.t("durations.days", {count: val})}`;
      } else if (key === "hours") {
        return `${val} ${I18n.t("durations.hours", {count: val})}`;
      } else if (key === "minutes") {
        return `${val} ${I18n.t("durations.minutes", {count: val})}`;
      }
      return "";
    })
    .filter(Boolean)
    .join(", ");
}

1	import {Grid} from "react-loader-spinner";
2
3	/**
4	* @file
5	* Provides generic helper functions and components for react-table tables.
6	*/
7
8	export function customLoadingProp({loading}) {
9	if (loading) {	115✔
10	return (	28✔
11	<div className="loading-spinner" data-testid="loading-spinner">
12	<Grid
13	visible={true}
14	height="25"
15	width="25"
16	color="#31649B"
17	aria-label="grid-loading"
18	radius="12.5"
19	wrapperStyle={{}}
20	wrapperClass="grid-wrapper"
21	/>
22	</div>
23	);
24	}
25
26	return null;	87✔
27	}
28
29	export function defaultSort(a, b) {
30	// Sort values, putting undefined/nulls below all other values.
31	// Based on react-table v6 defaultSortMethod (https://github.com/tannerlinsley/react-table/tree/v6/),
32	// but not string-based.
33	if ((a === undefined \|\| a === null) && (b === undefined \|\| b === null)) {	×
34	return 0;	×
35	} else if (a === undefined \|\| a === null) {	×
36	return -1;	×
37	} else if (b === undefined \|\| b === null) {	×
38	return 1;	×
39	} else {
40	// force any string values to lowercase
41	a = typeof a === "string" ? a.toLowerCase() : a;	×
42	b = typeof b === "string" ? b.toLowerCase() : b;	×
43	// Return either 1 or -1 to indicate a sort priority
44	if (a > b) {	×
45	return 1;	×
46	}
47	if (a < b) {	×
48	return -1;	×
49	}
50	// returning 0, undefined or any falsey value will use subsequent sorts or
51	// the index as a tiebreaker
52	return 0;	×
53	}
54	}
55
56	/**
57	* Case insensitive, locale aware, string filter function
58	*/
59	export function stringFilterMethod(filter, row) {
60	return String(row[filter.id])	×
61	.toLocaleLowerCase()
62	.includes(String(filter.value).toLocaleLowerCase());
63	}
64
65	export function dateSort(a, b) {
66	/** Sort values as dates */
67	if (!a && !b) {	×
68	return 0;	×
69	} else if (!a) {	×
70	return -1;	×
71	} else if (!b) {	×
72	return 1;	×
73	} else {
74	let a_date = new Date(a);	×
75	let b_date = new Date(b);	×
76	return (a_date \|\| 0) - (b_date \|\| 0);	×
77	}
78	}
79
80	export function durationSort(a, b) {
81	/** Sort values as a duration in weeks, days, hours, etc. */
82	a = [a.weeks \|\| -1, a.days \|\| -1, a.hours \|\| -1, a.minutes \|\| -1, a.seconds \|\| -1];	×
83	b = [b.weeks \|\| -1, b.days \|\| -1, b.hours \|\| -1, b.minutes \|\| -1, b.seconds \|\| -1];	×
84	if (a < b) {	×
85	return 1;	×
86	} else if (b < a) {	×
87	return -1;	×
88	} else {
89	return 0;	×
90	}
91	}
92
93	/**
94	* Text-based search filter. Based on react-table's default search filter,
95	* with an additional aria-label attribute.
96	*/
97	export function textFilter({filter, onChange, column}) {
98	return (	×
99	<input
100	type="text"
101	style={{
102	width: "100%",
103	}}
104	placeholder={column.Placeholder}
105	value={filter ? filter.value : ""}	×
106	aria-label={`${I18n.t("search")} ${column.Header \|\| ""}`}	×
107	onChange={event => onChange(event.target.value)}	×
108	/>
109	);
110	}
111
112	/**
113	* Locale-aware substring match with optional case sensitivity. null/undefined
114	* arguments are treated as the empty string, so callers do not have to guard
115	* against them.
116	*/
117	export function caseSensitiveIncludes(haystack, needle, caseSensitive) {
118	const a = haystack === null \|\| haystack === undefined ? "" : String(haystack);	62!
119	const b = needle === null \|\| needle === undefined ? "" : String(needle);	62!
120	if (caseSensitive) return a.includes(b);	62✔
121	return a.toLocaleLowerCase().includes(b.toLocaleLowerCase());	37✔
122	}
123
124	/**
125	* filterMethod that matches `row[filter.id]` against the filter's search text
126	* with the filter's own case sensitivity. Pair with `caseSensitiveTextFilter`,
127	* which stores `{filterValue, caseSensitive}` as the filter value. Empty
128	* filters match every row.
129	*/
130	// export function caseSensitiveStringFilterMethod(filter, row) {
131	// const {filterValue, caseSensitive} = filter.value;
132	// if (!filterValue) return true;
133	// return caseSensitiveIncludes(row[filter.id], filterValue, caseSensitive);
134	// }
135	export function caseSensitiveStringFilterMethod(row, columnId, filterValue) {
136	if (!filterValue) return true;	21!
137	const {value, caseSensitive} = filterValue;	21✔
138	if (!value) return true;	21✔
139	return caseSensitiveIncludes(row.getValue(columnId), value, caseSensitive);	12✔
140	}
141
142	/**
143	* A Filter component pairing a text input with an "Aa" checkbox toggle for
144	* case-sensitive matching. It owns both the search text and the toggle,
145	* passing them to the table together via `onChange` as
146	* `{filterValue, caseSensitive}`. Matching defaults to case-insensitive. Pair
147	* with `caseSensitiveStringFilterMethod`, or a custom filterMethod that reads
148	* `filter.value.filterValue` and `filter.value.caseSensitive`.
149	*/
150	export function caseSensitiveTextFilter({filter, onChange, column}) {
151	const filterValue = filter ? filter.value.filterValue : "";	63✔
152	const caseSensitive = filter ? filter.value.caseSensitive : false;	63✔
153
154	return (	63✔
155	<div style={{display: "flex", alignItems: "center", gap: "4px"}}>
156	<input
157	type="text"
158	style={{flex: 1, minWidth: 0}}
159	value={filterValue}
160	aria-label={`${I18n.t("search")} ${column.Header \|\| ""}`}	63!
161	onChange={event => onChange({filterValue: event.target.value, caseSensitive})}	3✔
162	/>
163	<label
164	title={I18n.t("table.case_sensitive_search")}
165	style={{display: "flex", alignItems: "center", cursor: "pointer"}}
166	>
167	<input
168	type="checkbox"
169	checked={caseSensitive}
170	onChange={event => onChange({filterValue, caseSensitive: event.target.checked})}	3✔
171	aria-label={I18n.t("table.case_sensitive_search")}
172	data-testid={`${column.id}_case_sensitive`}
173	/>
174	<span style={{fontSize: "1.05em", marginLeft: "2px"}}>
175	{I18n.t("table.case_sensitive_indicator")}
176	</span>
177	</label>
178	</div>
179	);
180	}
181
182	/**
183	* Select-based search filter. Options are generated from the custom column attribute
184	* filterOptions, which is a list of objects with keys "value" and "text".
185	* A default "all" option is prepended to the list of options; the text can be
186	* customized by setting the filterAllOptionText column attribute.
187	*/
188	export function selectFilter({filter, onChange, column}) {
189	let options = (column.filterOptions \|\| []).map(({value, text}) => (	206!
190	<option value={value} key={value}>	565✔
191	{text}
192	</option>
193	));
194	let allOptionText = column.filterAllOptionText \|\| I18n.t("all");	206✔
195	options.unshift(	206✔
196	<option value="all" key="all">
197	{allOptionText}
198	</option>
199	);
200
201	return (	206✔
202	<select
UNCOV 203	onChange={event => onChange(event.target.value)}	×
204	style={{width: "100%"}}
205	value={filter ? filter.value : "all"}	206!
206	aria-label={I18n.t("filter_by", {name: column.Header})}
207	>
208	{options}
209	</select>
210	);
211	}
212
213	export function markingStateColumn(marking_states, markingStateFilter, ...override_keys) {
214	return {	28✔
215	Header: I18n.t("activerecord.attributes.result.marking_state"),
216	accessor: "marking_state",
217	Cell: row => {
218	let marking_state = "";	77✔
219	switch (row.original.marking_state) {	77!
220	case "not_collected":
UNCOV 221	marking_state = I18n.t("submissions.state.not_collected");	×
222	break;	×
223	case "incomplete":
UNCOV 224	marking_state = I18n.t("submissions.state.in_progress");	×
UNCOV 225	break;	×
226	case "complete":
UNCOV 227	marking_state = I18n.t("submissions.state.complete");	×
228	break;	×
229	case "released":
230	marking_state = I18n.t("submissions.state.released");	77✔
231	break;	77✔
232	case "remark":
UNCOV 233	marking_state = I18n.t("submissions.state.remark_requested");	×
UNCOV 234	break;	×
235	case "before_due_date":
UNCOV 236	marking_state = I18n.t("submissions.state.before_due_date");	×
UNCOV 237	break;	×
238	default:
239	// should not get here
240	marking_state = row.original.marking_state;	×
241	}
242	return marking_state;	77✔
243	},
244	filterMethod: (filter, row) => {
UNCOV 245	if (filter.value === "all") {	×
UNCOV 246	return true;	×
247	} else {
UNCOV 248	return filter.value === row[filter.id];	×
249	}
250	},
251	filterAllOptionText:
252	I18n.t("all") +
253	(markingStateFilter === "all"	28!
254	? ` (${Object.values(marking_states).reduce((a, b) => a + b)})`	140✔
255	: ""),
256	filterOptions: [
257	{
258	value: "before_due_date",
259	text:
260	I18n.t("submissions.state.before_due_date") +
261	(["before_due_date", "all"].includes(markingStateFilter)	28!
262	? ` (${marking_states["before_due_date"]})`
263	: ""),
264	},
265	{
266	value: "not_collected",
267	text:
268	I18n.t("submissions.state.not_collected") +
269	(["not_collected", "all"].includes(markingStateFilter)	28!
270	? ` (${marking_states["not_collected"]})`
271	: ""),
272	},
273	{
274	value: "incomplete",
275	text:
276	I18n.t("submissions.state.in_progress") +
277	(["incomplete", "all"].includes(markingStateFilter)	28!
278	? ` (${marking_states["incomplete"]})`
279	: ""),
280	},
281	{
282	value: "complete",
283	text:
284	I18n.t("submissions.state.complete") +
285	(["complete", "all"].includes(markingStateFilter)	28!
286	? ` (${marking_states["complete"]})`
287	: ""),
288	},
289	{
290	value: "released",
291	text:
292	I18n.t("submissions.state.released") +
293	(["released", "all"].includes(markingStateFilter)	28!
294	? ` (${marking_states["released"]})`
295	: ""),
296	},
297	{
298	value: "remark",
299	text:
300	I18n.t("submissions.state.remark_requested") +
301	(["remark", "all"].includes(markingStateFilter) ? ` (${marking_states["remark"]})` : ""),	28!
302	},
303	],
304	Filter: selectFilter,
305	...override_keys,
306	};
307	}
308
309	export function getMarkingStates(data) {
310	const markingStates = {	62✔
311	not_collected: 0,
312	incomplete: 0,
313	complete: 0,
314	released: 0,
315	remark: 0,
316	before_due_date: 0,
317	};
318	data.forEach(row => {	62✔
319	markingStates[row["marking_state"]] += 1;	67✔
320	});
321	return markingStates;	62✔
322	}
323
324	export function customNoDataComponent({children, loading}) {
325	if (loading) {	44!
UNCOV 326	return null;	×
327	}
328	return <p className="rt-no-data">{children}</p>;	44✔
329	}
330
331	export function customGetNoDataProps(state) {
UNCOV 332	return {loading: state.loading, data: state.data};	×
333	}
334
335	export function getTimeExtension(extension, timePeriods) {
336	return timePeriods	40✔
337	.map(key => {
338	const val = extension[key];	160✔
339
340	if (!val) {	160✔
341	return null;	133✔
342	}
343	// don't build these strings dynamically or they will be missed by the i18n-tasks checkers.
344	if (key === "weeks") {	27!
345	return `${val} ${I18n.t("durations.weeks", {count: val})}`;	×
346	} else if (key === "days") {	27!
347	return `${val} ${I18n.t("durations.days", {count: val})}`;	27✔
348	} else if (key === "hours") {	×
UNCOV 349	return `${val} ${I18n.t("durations.hours", {count: val})}`;	×
UNCOV 350	} else if (key === "minutes") {	×
UNCOV 351	return `${val} ${I18n.t("durations.minutes", {count: val})}`;	×
352	}
UNCOV 353	return "";	×
354	})
355	.filter(Boolean)
356	.join(", ");
357	}

MarkUsProject / Markus / 29673128555

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