Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | import NotFoundPageState from "@common/EmptyState/NotFoundPageState";
import { Switch_V2 } from "@common/Switch";
import { Text } from "@common/Text";
import { shortenString } from "@features/MerchantPortal/DeveloperApi/hooks/useGetMerchantsApiKeys";
import LoadingSpinner from "@components/Snipper/LoadingSpinner";
import { Box, Stack } from "@mui/material";
import { useFeatureFlagContext } from "FeatureFlags/FeatureFlagProvider";
// Turn this to true or false to prevent the user to see the page
const FEATURE_FLAG_NAVIGATION = "ff_page";
// Turn this to true or false to conditionally render the text below
const FEATURE_FLAG_TO_TEST = "test_flag";
export const FeatureFlagsTests = () => {
const { flags, flagsmithState, isLoading } = useFeatureFlagContext();
if (isLoading) {
return <LoadingSpinner />;
}
// Prevent the user to see the page if "ff_page" flag is not set to true
const canUserSeeThePage = !!flags.get(FEATURE_FLAG_NAVIGATION);
if (!canUserSeeThePage) {
return <NotFoundPageState />;
}
return (
<Stack
height="100%"
gap={6}
sx={{
padding: "16px",
}}
>
<Stack gap={2}>
<Text fontSize="22px">Feature flags</Text>
<Text>Identity: {flagsmithState?.identity}</Text>
<Text>
Environment ID:{" "}
{shortenString(flagsmithState?.environmentID || "", 6)}
</Text>
<Text>Trait Name: {flagsmithState?.traits.name}</Text>
<Text>Trait Role: {flagsmithState?.traits.role}</Text>
<Text>Trait Email: {flagsmithState?.traits.email}</Text>
</Stack>
<Box>
{Array.from(flags).map((flag) => {
const [name, value] = flag;
return (
<Stack
direction="row"
alignItems="center"
key={name}
gap={2}
mt={2}
>
<Text>{name}</Text>
<Switch_V2
onChange={(e) => e.preventDefault()}
size="small"
checked={value}
/>
</Stack>
);
})}
</Box>
<Stack
sx={{
width: "100%",
backgroundColor: "#cdcdcd",
borderRadius: "16px",
height: "100%",
}}
direction="row"
justifyContent="center"
alignItems="center"
>
{
// Flag to check if a flag is working correctly
// Change it from true to false and viceversa for the text to be (not) rendered
!!flags.get(FEATURE_FLAG_TO_TEST) && (
<Text>
Disable/Enable feature flag "{FEATURE_FLAG_TO_TEST}" to
show/hide this text
</Text>
)
}
</Stack>
</Stack>
);
};
|