TS: add types to components/Profile (#813)

* init commit

* rewrite all components/Profile files

mwdb/web/src/__tests__/hooks/useCheckCapabilities.test.tsx

@@ -1,8 +1,9 @@
 import { renderHook } from "@testing-library/react";
 import { useCheckCapabilities } from "@mwdb-web/commons/hooks";
-import { AuthContextValues, Capability } from "@mwdb-web/types/types";
+import { Capability } from "@mwdb-web/types/types";
 import { AuthContext } from "@mwdb-web/commons/auth";
 import { AuthProviderProps } from "@mwdb-web/types/props";
+import { AuthContextValues } from "@mwdb-web/types/context";
 
 describe("useCheckCapabilities", () => {
     const authContextValue = {

mwdb/web/src/commons/api/index.tsx

@@ -56,6 +56,12 @@ import {
     GetUserProfileResponse,
     GetUserResponse,
     GetUsersResponse,
+    OauthGetIdentitiesResponse,
+    OauthGetLogoutLinkResponse,
+    OauthGetProvidersResponse,
+    OauthGetSingleProviderResponse,
+    OauthRemoveSingleProviderResponse,
+    OauthUpdateSingleProviderResponse,
     PullObjectRemoteResponse,
     PushObjectRemoteResponse,
     RegisterGroupResponse,
@@ -87,7 +93,8 @@ import {
     UploadFileResponse,
     UserRequestPasswordChangeResponse,
 } from "@mwdb-web/types/api";
-import { Attribute, ObjectType } from "@mwdb-web/types/types";
+import { Attribute, Capability, ObjectType } from "@mwdb-web/types/types";
+import { APIProviderProps } from "@mwdb-web/types/props";
 
 function getApiForEnvironment() {
     // Default API endpoint
@@ -203,35 +210,42 @@ function oauthRegisterProvider(
     });
 }
 
-function oauthGetProviders() {
+function oauthGetProviders(): OauthGetProvidersResponse {
     return axios.get("/oauth");
 }
 
-function oauthGetSingleProvider(provider_name: string) {
+function oauthGetSingleProvider(
+    provider_name: string
+): OauthGetSingleProviderResponse {
     return axios.get(`/oauth/${provider_name}`);
 }
 
-function oauthUpdateSingleProvider(name: string, value: string) {
+function oauthUpdateSingleProvider(
+    name: string,
+    value: string
+): OauthUpdateSingleProviderResponse {
     return axios.put(`/oauth/${name}`, value);
 }
 
-function oauthRemoveSingleProvider(name: string) {
+function oauthRemoveSingleProvider(
+    name: string
+): OauthRemoveSingleProviderResponse {
     return axios.delete(`/oauth/${name}`);
 }
 
-function oauthGetIdentities() {
+function oauthGetIdentities(): OauthGetIdentitiesResponse {
     return axios.get("/oauth/identities");
 }
 
-function oauthGetLogoutLink(provider: string) {
+function oauthGetLogoutLink(provider: string): OauthGetLogoutLinkResponse {
     return axios.get(`/oauth/${provider}/logout`);
 }
 
 function apiKeyAdd(login: string, name: string): ApiKeyAddResponse {
     return axios.post(`/user/${login}/api_key`, { name });
 }
 
-function apiKeyRemove(key_id: number): ApiKeyRemoveResponse {
+function apiKeyRemove(key_id: number | string): ApiKeyRemoveResponse {
     return axios.delete(`/api_key/${key_id}`);
 }
 
@@ -385,7 +399,10 @@ function registerGroup(name: string): RegisterGroupResponse {
     return axios.post(`/group/${name}`, { name });
 }
 
-function updateGroup(name: string, value: string): UpdateGroupResponse {
+function updateGroup(
+    name: string,
+    value: { capabilities: Capability[] }
+): UpdateGroupResponse {
     return axios.put(`/group/${name}`, value);
 }
 
@@ -871,10 +888,7 @@ export const api = {
     enableSharing3rdParty,
 };
 
-type APIProviderProps = {
-    children: React.ReactNode;
-};
-
+// TODO: api context is not needed, remove it when all components will rewrite to TypeScript
 export const APIContext = React.createContext({});
 export function APIProvider(props: APIProviderProps) {
     return (

mwdb/web/src/commons/auth/context.tsx

@@ -1,5 +1,5 @@
-import { AuthContextValues } from "@mwdb-web/types/types";
 import React from "react";
+import { AuthContextValues } from "@mwdb-web/types/context";
 
 export const AuthContext = React.createContext<AuthContextValues>(
     {} as AuthContextValues

mwdb/web/src/commons/auth/provider.tsx

@@ -5,8 +5,9 @@ import { api } from "../api";
 
 import { omit, isEqual, isNil } from "lodash";
 import { AuthContext } from "./context";
-import { AuthContextValues, Capability, User } from "@mwdb-web/types/types";
+import { Capability, User } from "@mwdb-web/types/types";
 import { AuthProviderProps } from "@mwdb-web/types/props";
+import { AuthContextValues } from "@mwdb-web/types/context";
 
 export const localStorageAuthKey = "user";
 

mwdb/web/src/commons/config/context.tsx

@@ -1,4 +1,4 @@
-import { ConfigContextValues } from "@mwdb-web/types/types";
+import { ConfigContextValues } from "@mwdb-web/types/context";
 import React from "react";
 
 export const ConfigContext = React.createContext<ConfigContextValues>(

mwdb/web/src/commons/config/provider.tsx

@@ -10,7 +10,8 @@ import { isEqual } from "lodash";
 import { api } from "../api";
 import { ConfigContext } from "./context";
 import { AuthContext } from "../auth";
-import { ConfigContextValues, ServerInfo, User } from "@mwdb-web/types/types";
+import { ServerInfo, User } from "@mwdb-web/types/types";
+import { ConfigContextValues } from "@mwdb-web/types/context";
 
 const configUpdate = Symbol("configUpdate");
 const configError = Symbol("configError");

mwdb/web/src/commons/ui/DateString.tsx

@@ -1,8 +1,11 @@
 type Props = {
-    date: string;
+    date?: string | Date;
 };
 
 export default function DateString(props: Props) {
+    if (!props.date) {
+        return <></>;
+    }
     const date = props.date;
     const d = new Date(date);
     return <span>{date != null ? d.toUTCString() : "(never)"}</span>;

mwdb/web/src/commons/ui/ObjectTab.tsx

@@ -4,7 +4,7 @@ import { IconProp } from "@fortawesome/fontawesome-svg-core";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { capitalize } from "../helpers";
-import { TabContextValues } from "@mwdb-web/types/types";
+import { TabContextValues } from "@mwdb-web/types/context";
 
 export const TabContext = React.createContext<TabContextValues>(
     {} as TabContextValues

mwdb/web/src/commons/ui/ShowIf.tsx

@@ -1,8 +1,8 @@
 type Props = {
     condition: boolean;
-    children: React.ReactNode;
+    children: JSX.Element;
 };
 
 export function ShowIf({ condition, children }: Props) {
-    return condition ? children : [];
+    return condition ? children : <></>;
 }

mwdb/web/src/components/Profile/ProfileView.jsx → mwdb/web/src/components/Profile/ProfileView.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { NavLink, useParams, Outlet } from "react-router-dom";
 
 import { faUserCog } from "@fortawesome/free-solid-svg-icons";
@@ -10,6 +10,7 @@ import { ConfigContext } from "@mwdb-web/commons/config";
 import { View } from "@mwdb-web/commons/ui";
 import { useViewAlert } from "@mwdb-web/commons/hooks";
 import DeleteCapabilityModal from "../Settings/Views/DeleteCapabilityModal";
+import { Capability, User } from "@mwdb-web/types/types";
 
 function ProfileNav() {
     const config = useContext(ConfigContext);
@@ -32,12 +33,10 @@ function ProfileNav() {
                 <NavLink end to="/profile/api-keys" className="nav-link">
                     API keys
                 </NavLink>
-                {config.config["is_oidc_enabled"] ? (
+                {config.config["is_oidc_enabled"] && (
                     <NavLink end to="/profile/oauth" className="nav-link">
                         OpenID Connect
                     </NavLink>
-                ) : (
-                    []
                 )}
             </div>
             <hr />
@@ -48,15 +47,18 @@ function ProfileNav() {
 export default function ProfileView() {
     const auth = useContext(AuthContext);
     const { redirectToAlert, setAlert } = useViewAlert();
-    const user = useParams().user || auth.user.login;
-    const [profile, setProfile] = useState({});
+    const userLogin = useParams().user || auth.user.login;
+    const [profile, setProfile] = useState<User>({} as User);
     const [capabilitiesToDelete, setCapabilitiesToDelete] = useState("");
 
     useEffect(() => {
         getProfile();
-    }, [user]);
+    }, [userLogin]);
 
-    async function changeCapabilities(capability, callback) {
+    async function changeCapabilities(
+        capability: Capability,
+        callback: Function
+    ) {
         try {
             const capabilities = profile.capabilities.filter(
                 (item) => item !== capability
@@ -71,7 +73,7 @@ export default function ProfileView() {
 
     async function getProfile() {
         try {
-            const response = await api.getUserProfile(user);
+            const response = await api.getUserProfile(userLogin);
             setProfile(response.data);
         } catch (error) {
             redirectToAlert({
@@ -81,7 +83,7 @@ export default function ProfileView() {
         }
     }
 
-    if (profile.login !== user) return <></>;
+    if (profile.login !== userLogin) return <></>;
 
     return (
         <View ident="profile" fluid>
@@ -103,7 +105,7 @@ export default function ProfileView() {
                 changeCapabilities={changeCapabilities}
                 capabilitiesToDelete={capabilitiesToDelete}
                 setCapabilitiesToDelete={setCapabilitiesToDelete}
-                successMessage={`Capabilities for ${user} successfully changed`}
+                successMessage={`Capabilities for ${userLogin} successfully changed`}
             />
         </View>
     );