Add a way to have multiple types of flags. (#1641)

Part of OPS-3117.

Author: MarceloRGonc

packages/react-ui/src/app/common/hooks/flags-hooks.ts

@@ -2,7 +2,7 @@ import { usePrefetchQuery, useSuspenseQuery } from '@tanstack/react-query';
 
 import { QueryKeys } from '@/app/constants/query-keys';
 import { flagsApi, FlagsMap } from '@/app/lib/flags-api';
-import { FlagId } from '@openops/shared';
+import { FlagId, OpenOpsFlag } from '@openops/shared';
 
 type WebsiteBrand = {
   websiteName: string;
@@ -48,7 +48,7 @@ export const flagsHooks = {
     const { data: theme } = flagsHooks.useFlag<WebsiteBrand>(FlagId.THEME);
     return theme!;
   },
-  useFlag: <T>(flagId: FlagId) => {
+  useFlag: <T>(flagId: OpenOpsFlag) => {
     const data = useSuspenseQuery<FlagsMap, Error>({
       queryKey: [QueryKeys.flags],
       queryFn: flagsApi.getAll,

packages/shared/src/lib/flag/flag.ts

@@ -17,6 +17,8 @@ export enum OpsEdition {
   CLOUD = 'cloud',
 }
 
+export type OpenOpsFlag = FlagId;
+
 export enum FlagId {
   SHOW_POWERED_BY_IN_FORM = 'SHOW_POWERED_BY_IN_FORM',
   CLOUD_AUTH_ENABLED = 'CLOUD_AUTH_ENABLED',