Merge branch 'main' into reduce-duplicate-code-modalcontent

src/components/events/partials/ModalTabsAndPages/EventDetailsCommentsTab.tsx

@@ -42,7 +42,7 @@ const EventDetailsCommentsTab = ({
 	const isSavingCommentReply = useAppSelector(state => getIsSavingCommentReply(state));
 
 	useEffect(() => {
-		dispatch(fetchComments(eventId)).then((r: any) => console.info(r));
+		dispatch(fetchComments(eventId));
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 

src/components/events/partials/wizards/NewEventWizard.tsx

@@ -287,7 +287,7 @@ const getInitialValues = (
 	if (!!uploadAssetOptions) {
 		initialValues.uploadAssetsTrack = [];
 		// Sort by displayOrder
-		uploadAssetOptions = uploadAssetOptions.slice().sort((a: any, b: any) => a.displayOrder - b.displayOrder)
+		uploadAssetOptions = uploadAssetOptions.slice().sort((a, b) => a.displayOrder - b.displayOrder)
 		// initial value of upload asset needs to be null, because object (file) is saved there
 		for (const option of uploadAssetOptions) {
 			if (option.type === "track") {

src/components/shared/EditTableViewModal.tsx

@@ -9,8 +9,17 @@ import {
 } from "../../selectors/tableSelectors";
 import { DragDropContext, Droppable, OnDragEndResponder, Draggable as Draggablee } from "@hello-pangea/dnd";
 import { useAppDispatch, useAppSelector } from "../../store";
-import { TableColumn } from "../../configs/tableConfigs/aclsTableConfig";
 import ModalContent from "./modals/ModalContent";
+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";
 import { Modal, ModalHandle } from "./modals/Modal";
 
 /**
@@ -101,6 +110,32 @@ const EditTableViewModalContent = ({
 		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
@@ -252,6 +287,9 @@ const EditTableViewModalContent = ({
 					<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>
 		</>
 	);

src/components/shared/Table.tsx

@@ -84,9 +84,9 @@ const Table = ({
 
 	useEffect(() => {
 		// Function for handling clicks outside of an open dropdown menu
-		const handleClickOutside = (e: any) => {
+		const handleClickOutside = (e: MouseEvent) => {
 			if (
-				e && containerPageSize.current && !containerPageSize.current.contains(e.target)
+				e && containerPageSize.current && !containerPageSize.current.contains(e.target as Node)
 			) {
 				setShowPageSizes(false);
 			}
@@ -395,7 +395,7 @@ const getDirectAccessiblePages = (pages: Page[], pagination: Pagination) => {
 };
 
 // Apply a column template and render corresponding components
-const ColumnTemplate = ({ row, column, templateMap }: {row: Row, column: TableColumn, templateMap: any}) => {
+const ColumnTemplate = ({ row, column, templateMap }: {row: Row, column: TableColumn, templateMap: TemplateMap}) => {
 	if (!column.template) {
 		return <></>;
 	}

src/components/shared/TableFilters.tsx

@@ -68,6 +68,7 @@ const TableFilters = ({
 		// Clear state
 		setStartDate(undefined);
 		setEndDate(undefined);
+		setFilterSelector(false);
 
 		dispatch(removeTextFilter());
 		dispatch(removeSelectedFilter());

src/components/shared/wizard/RenderField.tsx

@@ -178,11 +178,12 @@ const EditableDateValue = ({
 	setEditMode: (e: boolean) => void
 	showCheck?: boolean,
 	handleKeyDown: (event: React.KeyboardEvent, type: string) => void
-}) => editMode ? (
+}) => 
+	editMode ? (
 	<div>
 		<DatePicker
 			autoFocus
-			selected={typeof field.value === "string" ? parseISO(field.value) : field.value}
+			selected={!isNaN(Date.parse(field.value)) ? new Date(field.value) : null}
 			onChange={(value) => setFieldValue(field.name, value)}
 			onClickOutside={() => setEditMode(false)}
 			showTimeInput

src/components/users/partials/UsersActionsCell.tsx

@@ -1,6 +1,6 @@
 import React, { useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { UserResult, deleteUser } from "../../../slices/userSlice";
+import { User, deleteUser } from "../../../slices/userSlice";
 import { useAppDispatch } from "../../../store";
 import { fetchUserDetails } from "../../../slices/userDetailsSlice";
 import { Modal, ModalHandle } from "../../shared/modals/Modal";
@@ -14,7 +14,7 @@ import { IconButton } from "../../shared/IconButton";
 const UsersActionCell = ({
 	row,
 }: {
-	row: UserResult
+	row: User
 }) => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();

src/components/users/partials/UsersRolesCell.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { UserResult } from "../../../slices/userSlice";
+import { User } from "../../../slices/userSlice";
 
 /**
  * This component renders the roles cells of users in the table view
  */
 const UsersRolesCell = ({
 	row
 }: {
-	row: UserResult
+	row: User
 }) => {
 	const { t } = useTranslation();
 

src/configs/modalConfig.ts

@@ -99,7 +99,7 @@ export const initialFormValuesNewSeries: {
 
 	breadcrumbs: TobiraPage[],
 	selectedPage?: TobiraPage,
-	[key: string]: any,  // Metadata fields that are getting added later
+	[key: string]: unknown,  // Metadata fields that are getting added later
 } = {
 	acls: [
 		{

src/configs/sourceConfig.ts

@@ -1,3 +1,5 @@
+import { MetadataField } from "../slices/eventSlice";
+
 /* additional metadata that user should provide for new events
  * UPLOAD, SCHEDULE_SINGLE, SCHEDULE_MULTIPLE signal in which case the additional metadata is required/should be provided
  * A metadata field has following keys:
@@ -7,22 +9,12 @@
  * - type: indicates the type of metadata field (see metadata field provided by backend)
  * - readOnly: flag indicating if metadata field can be changed
  * - required: flag indicating if metadata field is required
- * - tabindex: tabindex of the metadata field
  */
-type Metadata = {
-	id: string,
-	label: string,
-	value: any,
-	type: string,
-	readOnly: boolean,
-	required: boolean,
-	tabindex: number,
-}
 
 type SourceType = {
-	UPLOAD?: { metadata: Metadata[] },
-	SCHEDULE_SINGLE?: { metadata: Metadata[] },
-	SCHEDULE_MULTIPLE?: { metadata: Metadata[] },
+	UPLOAD?: { metadata: MetadataField[] },
+	SCHEDULE_SINGLE?: { metadata: MetadataField[] },
+	SCHEDULE_MULTIPLE?: { metadata: MetadataField[] },
 }
 
 export const sourceMetadata: SourceType = {
@@ -35,7 +27,6 @@ export const sourceMetadata: SourceType = {
 				type: "date",
 				readOnly: false,
 				required: false,
-				tabindex: 7,
 			},
 		],
 	},

src/selectors/tableSelectors.ts

@@ -14,8 +14,8 @@ export const getPageLimit = (state: RootState) => state.table.pagination.limit;
 export const getPageOffset = (state: RootState) => state.table.pagination.offset;
 export const getNumberDirectAccessiblePages = (state: RootState) => state.table.pagination.directAccessibleNo;
 export const getResourceType = (state: RootState) => state.table.resource;
-export const getTableSorting = (state: RootState) => state.table.sortBy;
-export const getTableDirection = (state: RootState) => state.table.reverse;
+export const getTableSorting = (state: RootState) => state.table.sortBy[state.table.resource];
+export const getTableDirection = (state: RootState) => state.table.reverse[state.table.resource];
 export const getTable = (state: RootState) => state.table;
 export const getDeactivatedColumns = (state: RootState) =>
 	state.table.columns.filter((column) => column.deactivated);

src/slices/aclDetailsSlice.ts

@@ -35,7 +35,7 @@ const initialState: AclDetailsState = {
 };
 
 // fetch details about a certain acl from server
-export const fetchAclDetails = createAppAsyncThunk('aclDetails/fetchAclDetails', async (aclId: number) => {
+export const fetchAclDetails = createAppAsyncThunk('aclDetails/fetchAclDetails', async (aclId: AclDetailsState["id"]) => {
 	const res = await axios.get(`/admin-ng/acl/${aclId}`);
 
 	let aclDetails = res.data;