diff --git a/frontend/src/component/insights/InsightsCharts.tsx b/frontend/src/component/insights/InsightsCharts.tsx index 5833b50e77..fb244f4aba 100644 --- a/frontend/src/component/insights/InsightsCharts.tsx +++ b/frontend/src/component/insights/InsightsCharts.tsx @@ -18,7 +18,7 @@ import { allOption } from 'component/common/ProjectSelect/ProjectSelect'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import { WidgetTitle } from './components/WidgetTitle/WidgetTitle.tsx'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { useFlag } from '@unleash/proxy-client-react'; +import { useUiFlag } from 'hooks/useUiFlag.ts'; export interface IChartsProps { flagTrends: InstanceInsightsSchema['flagTrends']; @@ -105,7 +105,7 @@ export const InsightsCharts: FC = ({ const showAllProjects = projects[0] === allOption.id; const isOneProjectSelected = projects.length === 1; const { isEnterprise } = useUiConfig(); - const healthToDebtEnabled = useFlag('healthToTechDebt'); + const healthToDebtEnabled = useUiFlag('healthToTechDebt'); const lastUserTrend = userTrends[userTrends.length - 1]; const lastFlagTrend = flagTrends[flagTrends.length - 1]; diff --git a/frontend/src/component/insights/componentsChart/ProjectHealthChart/HealthChartTooltip/HealthChartTooltip.tsx b/frontend/src/component/insights/componentsChart/ProjectHealthChart/HealthChartTooltip/HealthChartTooltip.tsx index 42eab9ceff..605e6410d6 100644 --- a/frontend/src/component/insights/componentsChart/ProjectHealthChart/HealthChartTooltip/HealthChartTooltip.tsx +++ b/frontend/src/component/insights/componentsChart/ProjectHealthChart/HealthChartTooltip/HealthChartTooltip.tsx @@ -5,8 +5,8 @@ import { Badge } from 'component/common/Badge/Badge'; import type { TooltipState } from 'component/insights/components/LineChart/ChartTooltip/ChartTooltip'; import { HorizontalDistributionChart } from 'component/insights/components/HorizontalDistributionChart/HorizontalDistributionChart'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { useFlag } from '@unleash/proxy-client-react'; import { getTechnicalDebtColor } from 'utils/getTechnicalDebtColor.ts'; +import { useUiFlag } from 'hooks/useUiFlag'; const StyledTooltipItemContainer = styled(Paper)(({ theme }) => ({ padding: theme.spacing(2), @@ -108,7 +108,7 @@ const Distribution = ({ stale = 0, potentiallyStale = 0, total = 0 }) => { export const HealthTooltip: FC<{ tooltip: TooltipState | null }> = ({ tooltip, }) => { - const healthToTechDebtEnabled = useFlag('healthToTechDebt'); + const healthToTechDebtEnabled = useUiFlag('healthToTechDebt'); const data = tooltip?.dataPoints.map((point) => { return { diff --git a/frontend/src/component/insights/componentsChart/ProjectHealthChart/ProjectHealthChart.tsx b/frontend/src/component/insights/componentsChart/ProjectHealthChart/ProjectHealthChart.tsx index 721ed46c1f..ceef9f659d 100644 --- a/frontend/src/component/insights/componentsChart/ProjectHealthChart/ProjectHealthChart.tsx +++ b/frontend/src/component/insights/componentsChart/ProjectHealthChart/ProjectHealthChart.tsx @@ -14,7 +14,7 @@ import { import { useTheme } from '@mui/material'; import type { GroupedDataByProject } from 'component/insights/hooks/useGroupedProjectTrends'; import { usePlaceholderData } from 'component/insights/hooks/usePlaceholderData'; -import { useFlag } from '@unleash/proxy-client-react'; +import { useUiFlag } from 'hooks/useUiFlag.ts'; interface IProjectHealthChartProps { projectFlagTrends: GroupedDataByProject< @@ -46,7 +46,7 @@ export const ProjectHealthChart: FC = ({ const projectsData = useProjectChartData(projectFlagTrends); const theme = useTheme(); const placeholderData = usePlaceholderData(); - const healthToTechDebtEnabled = useFlag('healthToTechDebt'); + const healthToTechDebtEnabled = useUiFlag('healthToTechDebt'); const aggregateHealthData = useMemo(() => { const labels = Array.from( diff --git a/frontend/src/component/insights/componentsStat/HealthStats/HealthStats.tsx b/frontend/src/component/insights/componentsStat/HealthStats/HealthStats.tsx index 0943d143bd..6f0aaddbb6 100644 --- a/frontend/src/component/insights/componentsStat/HealthStats/HealthStats.tsx +++ b/frontend/src/component/insights/componentsStat/HealthStats/HealthStats.tsx @@ -1,7 +1,7 @@ import type { FC, ReactNode } from 'react'; import { Box, Divider, Link, styled } from '@mui/material'; import { ReactComponent as InstanceHealthIcon } from 'assets/icons/instance-health.svg'; -import { useFlag } from '@unleash/proxy-client-react'; +import { useUiFlag } from 'hooks/useUiFlag'; interface IHealthStatsProps { value?: string | number; @@ -73,7 +73,7 @@ export const HealthStats: FC = ({ potentiallyStale, title, }) => { - const healthToDebtEnabled = useFlag('healthToTechDebt'); + const healthToDebtEnabled = useUiFlag('healthToTechDebt'); return ( diff --git a/frontend/src/component/insights/sections/PerformanceInsights.tsx b/frontend/src/component/insights/sections/PerformanceInsights.tsx index 847f5ed085..d7687148a5 100644 --- a/frontend/src/component/insights/sections/PerformanceInsights.tsx +++ b/frontend/src/component/insights/sections/PerformanceInsights.tsx @@ -23,7 +23,7 @@ import { StyledWidgetContent, StyledWidgetStats, } from '../InsightsCharts.styles'; -import { useFlag } from '@unleash/proxy-client-react'; +import { useUiFlag } from 'hooks/useUiFlag'; export const PerformanceInsights: FC = () => { const statePrefix = 'performance-'; @@ -48,7 +48,7 @@ export const PerformanceInsights: FC = () => { state[`${statePrefix}to`]?.values[0], ); - const healthToTechDebtEnabled = useFlag('healthToTechDebt'); + const healthToTechDebtEnabled = useUiFlag('healthToTechDebt'); const projects = state[`${statePrefix}project`]?.values ?? [allOption.id]; diff --git a/frontend/src/component/personalDashboard/MyProjects.tsx b/frontend/src/component/personalDashboard/MyProjects.tsx index 540e8b5a0a..4389f24542 100644 --- a/frontend/src/component/personalDashboard/MyProjects.tsx +++ b/frontend/src/component/personalDashboard/MyProjects.tsx @@ -39,12 +39,12 @@ import { ActionBox } from './ActionBox.tsx'; import useLoading from 'hooks/useLoading'; import { NoProjectsContactAdmin } from './NoProjectsContactAdmin.tsx'; import { AskOwnerToAddYouToTheirProject } from './AskOwnerToAddYouToTheirProject.tsx'; -import { useFlag } from '@unleash/proxy-client-react'; +import { useUiFlag } from 'hooks/useUiFlag.ts'; const ActiveProjectDetails: FC<{ project: PersonalDashboardSchemaProjectsItem; }> = ({ project }) => { - const healthToTechDebtEnabled = useFlag('healthToTechDebt'); + const healthToTechDebtEnabled = useUiFlag('healthToTechDebt'); const techicalDebt = project.technicalDebt; return ( diff --git a/frontend/src/component/personalDashboard/ProjectSetupComplete.tsx b/frontend/src/component/personalDashboard/ProjectSetupComplete.tsx index befc0c2f34..c171d912b3 100644 --- a/frontend/src/component/personalDashboard/ProjectSetupComplete.tsx +++ b/frontend/src/component/personalDashboard/ProjectSetupComplete.tsx @@ -4,7 +4,7 @@ import { Link } from 'react-router-dom'; import Lightbulb from '@mui/icons-material/LightbulbOutlined'; import type { PersonalDashboardProjectDetailsSchemaInsights } from 'openapi'; import { ActionBox } from './ActionBox.tsx'; -import { useFlag } from '@unleash/proxy-client-react'; +import { useUiFlag } from 'hooks/useUiFlag.ts'; const PercentageScore = styled('span')(({ theme }) => ({ fontWeight: theme.typography.fontWeightBold, @@ -58,7 +58,7 @@ const ProjectHealthMessage: FC<{ insights: PersonalDashboardProjectDetailsSchemaInsights; project: string; }> = ({ trend, insights, project }) => { - const healthToTechDebtEnabled = useFlag('healthToTechDebt'); + const healthToTechDebtEnabled = useUiFlag('healthToTechDebt'); const { avgHealthCurrentWindow, avgHealthPastWindow, health } = insights; const improveMessage = healthToTechDebtEnabled ? 'Remember to archive your stale feature flags to keep the technical debt low.' @@ -202,7 +202,7 @@ export const ProjectSetupComplete: FC<{ project: string; insights: PersonalDashboardProjectDetailsSchemaInsights; }> = ({ project, insights }) => { - const healthToTechDebtEnabled = useFlag('healthToTechDebt'); + const healthToTechDebtEnabled = useUiFlag('healthToTechDebt'); const projectHealthTrend = determineProjectHealthTrend(insights); return ( diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectHealth.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectHealth.tsx index 5130f4ab6d..c5c77363d0 100644 --- a/frontend/src/component/project/Project/ProjectStatus/ProjectHealth.tsx +++ b/frontend/src/component/project/Project/ProjectStatus/ProjectHealth.tsx @@ -5,8 +5,8 @@ import { useProjectStatus } from 'hooks/api/getters/useProjectStatus/useProjectS import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; import { HealthGridTile } from './ProjectHealthGrid.styles'; import { PrettifyLargeNumber } from 'component/common/PrettifyLargeNumber/PrettifyLargeNumber'; -import { useFlag } from '@unleash/proxy-client-react'; import { getTechnicalDebtColor } from 'utils/getTechnicalDebtColor.ts'; +import { useUiFlag } from 'hooks/useUiFlag'; const ChartRadius = 40; const ChartStrokeWidth = 13; @@ -119,7 +119,7 @@ export const ProjectHealth = () => { } = useProjectStatus(projectId); const { isOss } = useUiConfig(); const theme = useTheme(); - const healthToDebtEnabled = useFlag('healthToTechDebt'); + const healthToDebtEnabled = useUiFlag('healthToTechDebt'); const circumference = 2 * Math.PI * ChartRadius; const healthRating = health.current; @@ -188,7 +188,7 @@ export const ProjectHealth = () => { {healthToDebtEnabled ? ( <> Your current technical debt rating is{' '} - {technicalDebt}%. + {technicalDebt.current}%. ) : ( <> diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx index 6cff5c07a3..f00c52d368 100644 --- a/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx +++ b/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx @@ -9,7 +9,7 @@ import { ProjectHealthGrid } from './ProjectHealthGrid.tsx'; import { useFeedback } from 'component/feedbackNew/useFeedback'; import FeedbackIcon from '@mui/icons-material/ChatOutlined'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; -import { useFlag } from '@unleash/proxy-client-react'; +import { useUiFlag } from 'hooks/useUiFlag'; const ModalContentContainer = styled('section')(({ theme }) => ({ minHeight: '100vh', @@ -141,7 +141,7 @@ export const ProjectStatusModal = ({ open, onClose, onFollowLink }: Props) => { }); }; const { isOss } = useUiConfig(); - const healthToDebtEnabled = useFlag('healthToTechDebt'); + const healthToDebtEnabled = useUiFlag('healthToTechDebt'); return (