Merge pull request #784 from Arnei/typing-groupdetails

Add typing to group details

src/components/users/partials/modal/GroupDetails.tsx

@@ -9,7 +9,7 @@ import { EditGroupSchema } from "../../../../utils/validate";
 import { getGroupDetails } from "../../../../selectors/groupDetailsSelectors";
 import ModalNavigation from "../../../shared/modals/ModalNavigation";
 import { useAppDispatch, useAppSelector } from "../../../../store";
-import { updateGroupDetails } from "../../../../slices/groupDetailsSlice";
+import { UpdateGroupDetailsState, updateGroupDetails } from "../../../../slices/groupDetailsSlice";
 
 /**
  * This component manages the pages of the group details
@@ -60,13 +60,11 @@ const GroupDetails: React.FC<{
 		},
 	];
 
-// @ts-expect-error TS(7006): Parameter 'tabNr' implicitly has an 'any' type.
-	const openTab = (tabNr) => {
+	const openTab = (tabNr: number) => {
 		setPage(tabNr);
 	};
 
-// @ts-expect-error TS(7006): Parameter 'values' implicitly has an 'any' type.
-	const handleSubmit = (values) => {
+	const handleSubmit = (values: UpdateGroupDetailsState) => {
 		dispatch(updateGroupDetails({values: values, groupId: groupDetails.id}));
 		close();
 	};

src/components/users/partials/modal/GroupDetailsModal.tsx

@@ -8,9 +8,12 @@ import { availableHotkeys } from "../../../../configs/hotkeysConfig";
  * This component renders the modal for displaying group details
  */
 const GroupDetailsModal = ({
-    close,
-    groupName
-}: any) => {
+	close,
+	groupName
+}: {
+	close: () => void,
+	groupName: string,
+}) => {
 	const { t } = useTranslation();
 
 	useHotkeys(

src/components/users/partials/wizard/GroupUsersPage.tsx

@@ -19,7 +19,7 @@ const GroupUsersPage = <T,>({
 	isEdit?: boolean,
 }) => {
 	// users that can be chosen by user
-	const [users, setUsers] = useState([]);
+	const [users, setUsers] = useState<{ id: string, name: string }[]>([]);
 	// flag for API call
 	const [loading, setLoading] = useState(false);
 
@@ -37,7 +37,6 @@ const GroupUsersPage = <T,>({
 				});
 			}
 
-// @ts-expect-error TS(2345): Argument of type '{ id: string; name: any; }[]' is... Remove this comment to see the full error message
 			setUsers(userNames);
 			setLoading(false);
 		}

src/components/users/partials/wizard/NewGroupSummaryPage.tsx

@@ -3,18 +3,12 @@ import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButt
 import { useTranslation } from "react-i18next";
 import Notifications from "../../../shared/Notifications";
 import { FormikProps } from "formik";
+import { initialFormValuesNewGroup } from "../../../../configs/modalConfig";
 
 /**
  * This component renders the summary page for new groups in the new group wizard.
  */
-interface RequiredFormProps {
-	name: string,
-	description: string,
-	roles: string[],
-	users: string[],
-}
-
-const NewGroupSummaryPage = <T extends RequiredFormProps>({
+const NewGroupSummaryPage = <T extends typeof initialFormValuesNewGroup>({
 	formik,
 	previousPage,
 }: {

src/configs/modalConfig.ts

@@ -132,7 +132,12 @@ export const initialFormValuesNewAcl: {
 
 // All fields for new group form that are fix and not depending on response of backend
 // InitialValues of Formik form (others computed dynamically depending on responses from backend)
-export const initialFormValuesNewGroup = {
+export const initialFormValuesNewGroup: {
+	name: string,
+	description: string,
+	roles: { name: string }[],
+	users: { id: string, name: string }[],
+} = {
 	name: "",
 	description: "",
 	roles: [],

src/slices/groupDetailsSlice.ts

@@ -7,7 +7,7 @@ import { createAppAsyncThunk } from '../createAsyncThunkWithTypes';
 /**
  * This file contains redux reducer for actions affecting the state of details of a group
  */
-type GroupDetailsState = {
+export type GroupDetailsState = {
 	status: 'uninitialized' | 'loading' | 'succeeded' | 'failed',
 	error: SerializedError | null,
   role: string,
@@ -18,6 +18,10 @@ type GroupDetailsState = {
 	users: {id: string, name: string}[],
 }
 
+export interface UpdateGroupDetailsState extends Omit<GroupDetailsState, 'roles'> {
+  roles: { name: string}[]
+}
+
 // initial redux state
 const initialState: GroupDetailsState = {
 	status: 'uninitialized',
@@ -37,8 +41,7 @@ export const fetchGroupDetails = createAppAsyncThunk('groupDetails/fetchGroupDet
 
 	let users: GroupDetailsState["users"] = [];
 	if (response.users.length > 0) {
-// @ts-expect-error TS(7006): Parameter 'user' implicitly has an 'any' type.
-		users = response.users.map((user) => {
+		users = response.users.map((user: { username: string, name: string }) => {
 			return {
 				id: user.username,
 				name: user.name,
@@ -60,7 +63,7 @@ export const fetchGroupDetails = createAppAsyncThunk('groupDetails/fetchGroupDet
 
 // update details of a certain group
 export const updateGroupDetails = createAppAsyncThunk('groupDetails/updateGroupDetails', async (params: {
-	values: GroupDetailsState,
+	values: UpdateGroupDetailsState,
 	groupId: string
 }, {dispatch}) => {
 	const { values, groupId } = params

src/slices/groupSlice.ts

@@ -5,11 +5,12 @@ import { buildGroupBody, getURLParams } from '../utils/resourceUtils';
 import { addNotification } from './notificationSlice';
 import { TableConfig } from '../configs/tableConfigs/aclsTableConfig';
 import { createAppAsyncThunk } from '../createAsyncThunkWithTypes';
+import { initialFormValuesNewGroup } from '../configs/modalConfig';
 
 /**
  * This file contains redux reducer for actions affecting the state of groups
  */
-type Group = {
+export type Group = {
 	description: string,
 	id: string,
 	name: string,
@@ -58,7 +59,7 @@ export const fetchGroups = createAppAsyncThunk('groups/fetchGroups', async (_, {
 });
 
 // post new group to backend
-export const postNewGroup = createAppAsyncThunk('groups/postNewGroup', async (values: Group, {dispatch}) => {
+export const postNewGroup = createAppAsyncThunk('groups/postNewGroup', async (values: typeof initialFormValuesNewGroup, {dispatch}) => {
 	// get URL params used for post request
 	let data = buildGroupBody(values);
 

src/utils/resourceUtils.ts

@@ -14,6 +14,7 @@ import { UserInfoState } from "../slices/userInfoSlice";
 import { hasAccess, isJson } from "./utils";
 import { RootState } from "../store";
 import { MetadataCatalog } from "../slices/eventSlice";
+import { initialFormValuesNewGroup } from '../configs/modalConfig';
 import { UpdateUser } from '../slices/userDetailsSlice';
 
 /**
@@ -87,8 +88,9 @@ export const buildUserBody = (values: NewUser | UpdateUser) => {
 };
 
 // used for create URLSearchParams for API requests used to create/update group
-// @ts-expect-error TS(7006): Parameter 'values' implicitly has an 'any' type.
-export const buildGroupBody = (values) => {
+export const buildGroupBody = (
+	values: typeof initialFormValuesNewGroup
+) => {
 	let roles = [],
 		users = [];