Restore reset button for edit table view modal

In the edit table view modal, the user can select which columns are displayed for the given table. The modal has a help text that mentions a "Reset" button, but that button is nowhere to be seen. This patch restores the reset button.
opencast · Jan 10, 2025 · 26d7417 · 26d7417
1 parent db02d14
commit 26d7417
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 13 deletions.
diff --git a/src/components/shared/EditTableViewModal.tsx b/src/components/shared/EditTableViewModal.tsx
@@ -11,7 +11,16 @@ import { DragDropContext, Droppable, OnDragEndResponder, Draggable as Draggablee
 import { availableHotkeys } from "../../configs/hotkeysConfig";
 import { useHotkeys } from "react-hotkeys-hook";
 import { useAppDispatch, useAppSelector } from "../../store";
-import { TableColumn } from "../../configs/tableConfigs/aclsTableConfig";
+import { aclsTableConfig, TableColumn } from "../../configs/tableConfigs/aclsTableConfig";
+import { eventsTableConfig } from "../../configs/tableConfigs/eventsTableConfig";
+import { seriesTableConfig } from "../../configs/tableConfigs/seriesTableConfig";
+import { recordingsTableConfig } from "../../configs/tableConfigs/recordingsTableConfig";
+import { jobsTableConfig } from "../../configs/tableConfigs/jobsTableConfig";
+import { serversTableConfig } from "../../configs/tableConfigs/serversTableConfig";
+import { servicesTableConfig } from "../../configs/tableConfigs/servicesTableConfig";
+import { usersTableConfig } from "../../configs/tableConfigs/usersTableConfig";
+import { groupsTableConfig } from "../../configs/tableConfigs/groupsTableConfig";
+import { themesTableConfig } from "../../configs/tableConfigs/themesTableConfig";
 
 /**
  * This component renders the modal for editing which columns are shown in the table
@@ -84,6 +93,32 @@ const EditTableViewModal = ({
 		close();
 	};
 
+	// Reset columns to how they were before the user made any changes ever
+	const resetToInitialConfig = () => {
+		const initialConfig = getConfigByResource(resource);
+		setActiveColumns(initialConfig?.columns.filter((column) => !column.deactivated) ?? []);
+		setDeactivatedColumns(initialConfig?.columns.filter((column) => column.deactivated) ?? []);
+	}
+
+	const getConfigByResource = (resource: string) => {
+		switch (resource) {
+			case "events": return eventsTableConfig;
+			case "series": return seriesTableConfig;
+			case "recordings": return recordingsTableConfig;
+			case "jobs": return jobsTableConfig;
+			case "servers": return serversTableConfig;
+			case "services": return servicesTableConfig;
+			case "users": return usersTableConfig;
+			case "groups": return groupsTableConfig;
+			case "acls": return aclsTableConfig;
+			case "themes": return themesTableConfig;
+			default: {
+				console.warn("Resource of type " + resource + " is undefined for tableConfigs.")
+				return undefined;
+			}
+		}
+	}
+
 	// change column order based on where column was dragged and dropped
 	const onDragEnd: OnDragEndResponder = (result) => {
 		// dropped outside the list
@@ -253,6 +288,9 @@ const EditTableViewModal = ({
 						<button onClick={() => save()} className="submit active">
 							{t("SAVE") /* Save As Default */}
 						</button>
+						<button onClick={() => resetToInitialConfig()} className="cancel active">
+							{t("RESET") /* Reset saved setting */}
+						</button>
 				</footer>
 			</section>
 		</>

diff --git a/src/slices/tableSlice.ts b/src/slices/tableSlice.ts
@@ -70,11 +70,13 @@ export function isSeries(row: Row | Event | Series | Recording | Server | Job |
 // TODO: Improve row typing. While this somewhat correctly reflects the current state of our code, it is rather annoying to work with.
 export type Row = { selected: boolean } & ( Event | Series | Recording | Server | Job | Service | UserResult | Group | AclResult | ThemeDetailsType )
 
+export type Resource = "events" | "series" | "recordings" | "jobs" | "servers" | "services" | "users" | "groups" | "acls" | "themes"
+
 type TableState = {
 	status: 'uninitialized' | 'loading' | 'succeeded' | 'failed',
 	error: SerializedError | null,
 	multiSelect: boolean,
-	resource: string,
+	resource: Resource,
 	pages: Page[],
 	columns: TableConfig["columns"],
 	sortBy: string,
@@ -90,7 +92,7 @@ const initialState: TableState = {
 	status: 'uninitialized',
 	error: null,
 	multiSelect: false,
-	resource: "",
+	resource: "events",
 	pages: [],
 	columns: [],
 	sortBy: "date",

diff --git a/src/thunks/tableThunks.ts b/src/thunks/tableThunks.ts
@@ -75,7 +75,7 @@ export const loadEventsIntoTable = (): AppThunk => async (dispatch, getState) =>
 	const pages = calculatePages(total / pagination.limit, pagination.offset);
 
 	let tableData = {
-		resource: "events",
+		resource: "events" as const,
 		rows: resource,
 		columns: events.columns,
 		multiSelect: table.multiSelect,
@@ -124,7 +124,7 @@ export const loadSeriesIntoTable = (): AppThunk => (dispatch, getState) => {
 	const pages = calculatePages(total / pagination.limit, pagination.offset);
 
 	let tableData = {
-		resource: "series",
+		resource: "series" as const,
 		rows: resource,
 		columns: series.columns,
 		multiSelect: table.multiSelect,
@@ -156,7 +156,7 @@ export const loadRecordingsIntoTable = (): AppThunk => (dispatch, getState) => {
 	const pages = calculatePages(total / pagination.limit, pagination.offset);
 
 	let tableData = {
-		resource: "recordings",
+		resource: "recordings" as const,
 		columns: recordings.columns,
 		multiSelect: table.multiSelect,
 		pages: pages,
@@ -191,7 +191,7 @@ export const loadJobsIntoTable = (): AppThunk => (dispatch, getState) => {
 	const pages = calculatePages(total / pagination.limit, pagination.offset);
 
 	let tableData = {
-		resource: "jobs",
+		resource: "jobs" as const,
 		rows: resource.map((obj) => {
 			return { ...obj, selected: false }
 		}),
@@ -225,7 +225,7 @@ export const loadServersIntoTable = (): AppThunk => (dispatch, getState) => {
 	const pages = calculatePages(total / pagination.limit, pagination.offset);
 
 	let tableData = {
-		resource: "servers",
+		resource: "servers" as const,
 		rows: resource.map((obj) => {
 			return { ...obj, selected: false }
 		}),
@@ -264,7 +264,7 @@ export const loadServicesIntoTable = (): AppThunk => (dispatch, getState) => {
 		}),
 		pages: pages,
 		totalItems: total,
-		resource: "services",
+		resource: "services" as const,
 		columns: services.columns,
 		multiSelect: table.multiSelect,
 		sortBy: table.sortBy,
@@ -294,7 +294,7 @@ export const loadUsersIntoTable = (): AppThunk => (dispatch, getState) => {
 	const pages = calculatePages(total / pagination.limit, pagination.offset);
 
 	let tableData = {
-		resource: "users",
+		resource: "users" as const,
 		rows: resource.map((obj) => {
 			return { ...obj, selected: false }
 		}),
@@ -328,7 +328,7 @@ export const loadGroupsIntoTable = (): AppThunk => (dispatch, getState) => {
 	const pages = calculatePages(total / pagination.limit, pagination.offset);
 
 	let tableData = {
-		resource: "groups",
+		resource: "groups" as const,
 		rows: resource.map((obj) => {
 			return { ...obj, selected: false }
 		}),
@@ -362,7 +362,7 @@ export const loadAclsIntoTable = (): AppThunk => (dispatch, getState) => {
 	const pages = calculatePages(total / pagination.limit, pagination.offset);
 
 	let tableData = {
-		resource: "acls",
+		resource: "acls" as const,
 		rows: resource.map((obj) => {
 			return { ...obj, selected: false }
 		}),
@@ -395,7 +395,7 @@ export const loadThemesIntoTable = (): AppThunk => (dispatch, getState) => {
 	const pages = calculatePages(total / pagination.limit, pagination.offset);
 
 	let tableData = {
-		resource: "themes",
+		resource: "themes" as const,
 		rows: resource.map((obj) => {
 			return { ...obj, selected: false }
 		}),