fix: services cleanup

src/api/tenants/index.ts

@@ -13,9 +13,36 @@
  * under the License.
  */
 import { getApiUrl, useFetchData } from "../../utils";
-import { ProviderConfig, ProviderConfigResponse, TenantInfo } from "./types";
+import { ProviderConfig, ProviderConfigResponse, Tenant, TenantInfo } from "./types";
 
-export const useTenantCreateService = () => {
+export const useListTenantsService = () => {
+	const fetchData = useFetchData();
+
+	const fetchTenants = async (): Promise<{
+		status: "OK";
+		tenants: Tenant[];
+	}> => {
+		const response = await fetchData({
+			method: "GET",
+			url: getApiUrl("/api/tenants"),
+		});
+
+		const result = response.ok ? await response.json() : undefined;
+
+		// Ensure the public tenant is the first result, followed by all other tenants in alphabetical order
+		result.tenants.sort((a: Tenant, b: Tenant) =>
+			(a.tenantId === "public" ? "" : a.tenantId).localeCompare(b.tenantId === "public" ? "" : b.tenantId)
+		);
+
+		return result;
+	};
+
+	return {
+		fetchTenants,
+	};
+};
+
+export const useCreateOrUpdateTenantService = () => {
 	const fetchData = useFetchData();
 
 	const createOrUpdateTenant = async (
@@ -54,7 +81,7 @@ export const useTenantCreateService = () => {
 	return createOrUpdateTenant;
 };
 
-export const useTenantGetService = () => {
+export const useGetTenantInfoService = () => {
 	const fetchData = useFetchData();
 
 	const getTenantInfo = async (
@@ -84,7 +111,7 @@ export const useTenantGetService = () => {
 	return getTenantInfo;
 };
 
-export const useTenantDeleteService = () => {
+export const useDeleteTenantService = () => {
 	const fetchData = useFetchData();
 
 	const deleteTenant = async (tenantId: string): Promise<{ status: "OK" }> => {
@@ -103,10 +130,10 @@ export const useTenantDeleteService = () => {
 	return deleteTenant;
 };
 
-export const useUpdateFirstFactorsService = () => {
+export const useUpdateFirstFactorService = () => {
 	const fetchData = useFetchData();
 
-	const updateFirstFactors = async (
+	const updateFirstFactor = async (
 		tenantId: string,
 		factorId: string,
 		enable: boolean
@@ -133,13 +160,13 @@ export const useUpdateFirstFactorsService = () => {
 		throw new Error("Unknown error");
 	};
 
-	return updateFirstFactors;
+	return updateFirstFactor;
 };
 
-export const useUpdateSecondaryFactorsService = () => {
+export const useUpdateRequiredSecondaryFactorService = () => {
 	const fetchData = useFetchData();
 
-	const updateSecondaryFactors = async (
+	const updateRequiredSecondaryFactor = async (
 		tenantId: string,
 		factorId: string,
 		enable: boolean
@@ -150,7 +177,7 @@ export const useUpdateSecondaryFactorsService = () => {
 		| { status: "UNKNOWN_TENANT_ERROR" }
 	> => {
 		const response = await fetchData({
-			url: getApiUrl("/api/tenant/secondary-factor", tenantId),
+			url: getApiUrl("/api/tenant/required-secondary-factor", tenantId),
 			method: "PUT",
 			config: {
 				body: JSON.stringify({
@@ -167,7 +194,7 @@ export const useUpdateSecondaryFactorsService = () => {
 		throw new Error("Unknown error");
 	};
 
-	return updateSecondaryFactors;
+	return updateRequiredSecondaryFactor;
 };
 
 export const useUpdateCoreConfigService = () => {
@@ -201,7 +228,7 @@ export const useUpdateCoreConfigService = () => {
 	return updateCoreConfig;
 };
 
-export const useGetThirdPartyProviderInfo = () => {
+export const useGetThirdPartyProviderInfoService = () => {
 	const fetchData = useFetchData();
 
 	const getThirdPartyProviderInfo = async (
@@ -239,7 +266,7 @@ export const useGetThirdPartyProviderInfo = () => {
 	return getThirdPartyProviderInfo;
 };
 
-export const useCreateOrUpdateThirdPartyProvider = () => {
+export const useCreateOrUpdateThirdPartyProviderService = () => {
 	const fetchData = useFetchData();
 
 	const createOrUpdateThirdPartyProvider = async (
@@ -267,7 +294,7 @@ export const useCreateOrUpdateThirdPartyProvider = () => {
 	return createOrUpdateThirdPartyProvider;
 };
 
-export const useDeleteThirdPartyProvider = () => {
+export const useDeleteThirdPartyProviderService = () => {
 	const fetchData = useFetchData();
 
 	const deleteThirdPartyProvider = async (

src/api/tenants/types.ts

@@ -1,3 +1,10 @@
+export type Tenant = {
+	tenantId: string;
+	firstFactors: string[];
+};
+
+export type PasswordlessContactMethod = "PHONE" | "EMAIL" | "EMAIL_OR_PHONE";
+
 export type UserInfoMap = {
 	fromIdTokenPayload?: {
 		userId?: string;
@@ -102,7 +109,7 @@ export type BuiltInProvidersCustomFields = {
 };
 
 export type ProviderClientState = Omit<ProviderClientConfig, "additionalConfig"> & {
-	additionalConfig: Array<[string, string | null]>;
+	additionalConfig: [string, string | null][];
 	// Generated locally to correctly render clients list
 	key: string;
 };

src/ui/components/createUser/CreatePasswordlessUser.tsx

@@ -14,7 +14,7 @@
  */
 
 import { useContext, useEffect, useState } from "react";
-import { PasswordlessContactMethod } from "../../../api/tenants/list";
+import { PasswordlessContactMethod } from "../../../api/tenants/types";
 import useCreateUserService, { CreatePasswordlessUserPayload } from "../../../api/user/create";
 import { getApiUrl, getImageUrl } from "../../../utils";
 import { PopupContentContext } from "../../contexts/PopupContentContext";

src/ui/components/createUser/CreateUserDialog.tsx

@@ -16,7 +16,7 @@
 import "./createUserDialog.scss";
 
 import { useState } from "react";
-import { PasswordlessContactMethod, Tenant } from "../../../api/tenants/list";
+import { PasswordlessContactMethod, Tenant } from "../../../api/tenants/types";
 import { FactorIds } from "../../../constants";
 import { doesTenantHasPasswordlessEnabled } from "../../../utils";
 import Alert from "../alert";

src/ui/components/nativeSelect/NativeSelect.tsx

@@ -16,7 +16,7 @@
 import "./nativeSelect.scss";
 
 type NativeSelectProps = React.SelectHTMLAttributes<HTMLSelectElement> & {
-	options: Array<string>;
+	options: string[];
 	label?: string;
 	isRequired?: boolean;
 };

src/ui/components/tenants/creatNewTenant/CreateNewTenant.tsx

@@ -20,11 +20,11 @@ import { Dialog, DialogContent, DialogFooter } from "../../dialog";
 import InputField from "../../inputField/InputField";
 
 import { useNavigate } from "react-router-dom";
-import { useTenantCreateService } from "../../../../api/tenants";
+import { useCreateOrUpdateTenantService } from "../../../../api/tenants";
 import "./createNewTenant.scss";
 
 export const CreateNewTenantDialog = ({ onCloseDialog }: { onCloseDialog: () => void }) => {
-	const createTenant = useTenantCreateService();
+	const createTenant = useCreateOrUpdateTenantService();
 	const navigate = useNavigate();
 	const [tenantCreationError, setTenantCreationError] = useState<string | undefined>(undefined);
 	const [isCreatingTenant, setIsCreatingTenant] = useState(false);

src/ui/components/tenants/tenantDetail/LoginMethodsSection.tsx

@@ -13,10 +13,10 @@
  * under the License.
  */
 import { useContext, useState } from "react";
-import { useUpdateFirstFactorsService, useUpdateSecondaryFactorsService } from "../../../../api/tenants";
+import { useUpdateFirstFactorService, useUpdateRequiredSecondaryFactorService } from "../../../../api/tenants";
 import { ReactComponent as ErrorIcon } from "../../../../assets/form-field-error-icon.svg";
 import { ReactComponent as InfoIcon } from "../../../../assets/info-icon.svg";
-import { FactorIds, FIRST_FACTOR_IDS, SECONDARY_FACTOR_IDS } from "../../../../constants";
+import { FIRST_FACTOR_IDS, FactorIds, SECONDARY_FACTOR_IDS } from "../../../../constants";
 import { doesTenantHasPasswordlessEnabled, getImageUrl } from "../../../../utils";
 import { PopupContentContext } from "../../../contexts/PopupContentContext";
 import { ErrorBlock } from "../../errorBlock/ErrorBlock";
@@ -139,8 +139,8 @@ const LoginFactor = ({
 	const [isLoading, setIsLoading] = useState(false);
 	const [error, setError] = useState<string | null>(null);
 	const { tenantInfo, refetchTenant } = useTenantDetailContext();
-	const updateFirstFactors = useUpdateFirstFactorsService();
-	const updateSecondaryFactors = useUpdateSecondaryFactorsService();
+	const updateFirstFactors = useUpdateFirstFactorService();
+	const updateSecondaryFactors = useUpdateRequiredSecondaryFactorService();
 	const hasError = error !== null;
 	const { showToast } = useContext(PopupContentContext);
 

src/ui/components/tenants/tenantDetail/TenantDetail.tsx

@@ -13,24 +13,24 @@
  * under the License.
  */
 import { useContext, useEffect, useState } from "react";
-import { useTenantGetService } from "../../../../api/tenants";
+import { useGetTenantInfoService } from "../../../../api/tenants";
 import { TenantDashboardView, TenantInfo } from "../../../../api/tenants/types";
 import { ReactComponent as NoTenantFound } from "../../../../assets/no-tenants.svg";
 import { FactorIds, PUBLIC_TENANT_ID } from "../../../../constants";
 import { getImageUrl, usePrevious } from "../../../../utils";
 import { PopupContentContext } from "../../../contexts/PopupContentContext";
 import Button from "../../button";
 import { Loader } from "../../loader/Loader";
-import { AddNewProviderDialog } from "./addNewProviderDialog/AddNewProviderDialog";
 import { CoreConfigSection } from "./CoreConfigSection";
-import { DeleteTenantDialog } from "./deleteTenant/DeleteTenant";
 import { LoginMethodsSection } from "./LoginMethodsSection";
-import { ProviderListDialog } from "./providerListDialog/ProviderListDialog";
-import "./tenantDetail.scss";
 import { TenantDetailContextProvider } from "./TenantDetailContext";
 import { TenantDetailHeader } from "./TenantDetailHeader";
-import { ThirdPartyPage } from "./thirdPartyPage/ThirdPartyPage";
 import { ThirdPartySection } from "./ThirdPartySection";
+import { AddNewProviderDialog } from "./addNewProviderDialog/AddNewProviderDialog";
+import { DeleteTenantDialog } from "./deleteTenant/DeleteTenant";
+import { ProviderListDialog } from "./providerListDialog/ProviderListDialog";
+import "./tenantDetail.scss";
+import { ThirdPartyPage } from "./thirdPartyPage/ThirdPartyPage";
 
 export const TenantDetail = ({
 	onBackButtonClicked,
@@ -39,7 +39,7 @@ export const TenantDetail = ({
 	onBackButtonClicked: () => void;
 	tenantId: string;
 }) => {
-	const getTenantInfo = useTenantGetService();
+	const getTenantInfo = useGetTenantInfoService();
 	const [isNoProviderAddedDialogVisible, setIsNoProviderAddedDialogVisible] = useState(false);
 	const [tenant, setTenant] = useState<TenantInfo | undefined>(undefined);
 	const [isLoading, setIsLoading] = useState(true);

src/ui/components/tenants/tenantDetail/deleteTenant/DeleteTenant.tsx

@@ -13,7 +13,7 @@
  * under the License.
  */
 import { useContext, useState } from "react";
-import { useTenantDeleteService } from "../../../../../api/tenants";
+import { useDeleteTenantService } from "../../../../../api/tenants";
 import { getImageUrl } from "../../../../../utils";
 import { PopupContentContext } from "../../../../contexts/PopupContentContext";
 import Button from "../../../button";
@@ -32,7 +32,7 @@ export const DeleteTenantDialog = ({
 }) => {
 	const [currentTenantId, setCurrentTenantId] = useState("");
 	const [isDeletingTenant, setIsDeletingTenant] = useState(false);
-	const deleteTenant = useTenantDeleteService();
+	const deleteTenant = useDeleteTenantService();
 	const { showToast } = useContext(PopupContentContext);
 
 	const handleDeleteProperty = async () => {

src/ui/components/tenants/tenantDetail/deleteThirdPartyProvider/DeleteThirdPartyProvider.tsx

@@ -13,7 +13,7 @@
  * under the License.
  */
 import { useContext, useState } from "react";
-import { useDeleteThirdPartyProvider } from "../../../../../api/tenants";
+import { useDeleteThirdPartyProviderService } from "../../../../../api/tenants";
 import { getImageUrl } from "../../../../../utils";
 import { PopupContentContext } from "../../../../contexts/PopupContentContext";
 import Button from "../../../button";
@@ -31,7 +31,7 @@ export const DeleteThirdPartyProviderDialog = ({
 	thirdPartyId: string;
 }) => {
 	const [isDeletingProvider, setIsDeletingProvider] = useState(false);
-	const deleteThirdPartyProvider = useDeleteThirdPartyProvider();
+	const deleteThirdPartyProvider = useDeleteThirdPartyProviderService();
 	const { tenantInfo, refetchTenant } = useTenantDetailContext();
 	const { showToast } = useContext(PopupContentContext);
 

src/ui/components/tenants/tenantDetail/keyValueInput/KeyValueInput.tsx

@@ -23,10 +23,10 @@ type KeyValueInputProps = {
 	label: string;
 	tooltip?: string;
 	isRequired?: boolean;
-	value: Array<[string, string | null]>;
+	value: [string, string | null][];
 	name: string;
-	onChange: (value: Array<[string, string | null]>) => void;
-	fixedFields?: Array<string>;
+	onChange: (value: [string, string | null][]) => void;
+	fixedFields?: string[];
 	isOverridden?: boolean;
 };
 
@@ -51,7 +51,7 @@ export const KeyValueInput = (props: KeyValueInputProps) => {
 									value={isOverridden ? "Custom Override" : pair[0]}
 									disabled={fixedFields?.includes(pair[0]) || isOverridden}
 									handleChange={(e) => {
-										const newValue: Array<[string, string | null]> = [
+										const newValue: [string, string | null][] = [
 											...props.value.slice(0, index),
 											[e.target.value, props.value[index][1]],
 											...props.value.slice(index + 1),
@@ -66,7 +66,7 @@ export const KeyValueInput = (props: KeyValueInputProps) => {
 									value={isOverridden ? "Custom Override" : pair[1] ?? ""}
 									disabled={fixedFields?.includes(pair[0]) || isOverridden}
 									handleChange={(e) => {
-										const newValue: Array<[string, string | null]> = [
+										const newValue: [string, string | null][] = [
 											...props.value.slice(0, index),
 											[props.value[index][0], e.target.value],
 											...props.value.slice(index + 1),

src/ui/components/tenants/tenantDetail/thirdPartyPage/ThirdPartyPage.tsx

@@ -13,7 +13,7 @@
  * under the License.
  */
 import { useContext, useEffect, useState } from "react";
-import { useGetThirdPartyProviderInfo } from "../../../../../api/tenants";
+import { useGetThirdPartyProviderInfoService } from "../../../../../api/tenants";
 import { ProviderConfigResponse } from "../../../../../api/tenants/types";
 import { getImageUrl, isValidHttpUrl } from "../../../../../utils";
 import { PopupContentContext } from "../../../../contexts/PopupContentContext";
@@ -72,7 +72,7 @@ const ProviderInfo = ({
 	const [hasFilledCustomFieldsForProvider, setHasFilledCustomFieldsForProvider] = useState(
 		!PROVIDERS_WITH_ADDITIONAL_CONFIG.includes(providerId ?? "")
 	);
-	const getThirdPartyProviderInfo = useGetThirdPartyProviderInfo();
+	const getThirdPartyProviderInfo = useGetThirdPartyProviderInfoService();
 	const [providerConfigResponse, setProviderConfigResponse] = useState<ProviderConfigResponse | undefined>(undefined);
 	const providerHasCustomFields =
 		typeof providerId === "string" && PROVIDERS_WITH_ADDITIONAL_CONFIG.includes(providerId);