Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-09-24 17:51:14 +02:00
Code Issues Projects Releases Wiki Activity

fix: health to debt with ui-flag (#10131)

Browse Source 
useFlag is only connected to unleash-frontend project - it's easier to
switch to `useUiFlag` then moving a flag to this project
This commit is contained in:
Tymoteusz Czech 2025-06-13 11:12:02 +02:00 committed by GitHub
parent b70f862f93
commit d34acb6999
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 21 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/component/insights/InsightsCharts.tsx
View File

@ -18,7 +18,7 @@ import { allOption } from 'component/common/ProjectSelect/ProjectSelect';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { WidgetTitle } from './components/WidgetTitle/WidgetTitle.tsx'; import { WidgetTitle } from './components/WidgetTitle/WidgetTitle.tsx';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { useFlag } from '@unleash/proxy-client-react'; import { useUiFlag } from 'hooks/useUiFlag.ts';
export interface IChartsProps { export interface IChartsProps {
flagTrends: InstanceInsightsSchema['flagTrends']; flagTrends: InstanceInsightsSchema['flagTrends'];
@ -105,7 +105,7 @@ export const InsightsCharts: FC<IChartsProps> = ({
const showAllProjects = projects[0] === allOption.id; const showAllProjects = projects[0] === allOption.id;
const isOneProjectSelected = projects.length === 1; const isOneProjectSelected = projects.length === 1;
const { isEnterprise } = useUiConfig(); const { isEnterprise } = useUiConfig();
const healthToDebtEnabled = useFlag('healthToTechDebt'); const healthToDebtEnabled = useUiFlag('healthToTechDebt');
const lastUserTrend = userTrends[userTrends.length - 1]; const lastUserTrend = userTrends[userTrends.length - 1];
const lastFlagTrend = flagTrends[flagTrends.length - 1]; const lastFlagTrend = flagTrends[flagTrends.length - 1];

4
frontend/src/component/insights/componentsChart/ProjectHealthChart/HealthChartTooltip/HealthChartTooltip.tsx
View File

@ -5,8 +5,8 @@ import { Badge } from 'component/common/Badge/Badge';
import type { TooltipState } from 'component/insights/components/LineChart/ChartTooltip/ChartTooltip'; import type { TooltipState } from 'component/insights/components/LineChart/ChartTooltip/ChartTooltip';
import { HorizontalDistributionChart } from 'component/insights/components/HorizontalDistributionChart/HorizontalDistributionChart'; import { HorizontalDistributionChart } from 'component/insights/components/HorizontalDistributionChart/HorizontalDistributionChart';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { useFlag } from '@unleash/proxy-client-react';
import { getTechnicalDebtColor } from 'utils/getTechnicalDebtColor.ts'; import { getTechnicalDebtColor } from 'utils/getTechnicalDebtColor.ts';
import { useUiFlag } from 'hooks/useUiFlag';
const StyledTooltipItemContainer = styled(Paper)(({ theme }) => ({ const StyledTooltipItemContainer = styled(Paper)(({ theme }) => ({
padding: theme.spacing(2), padding: theme.spacing(2),
@ -108,7 +108,7 @@ const Distribution = ({ stale = 0, potentiallyStale = 0, total = 0 }) => {
export const HealthTooltip: FC<{ tooltip: TooltipState | null }> = ({ export const HealthTooltip: FC<{ tooltip: TooltipState | null }> = ({
tooltip, tooltip,
}) => { }) => {
const healthToTechDebtEnabled = useFlag('healthToTechDebt'); const healthToTechDebtEnabled = useUiFlag('healthToTechDebt');
const data = tooltip?.dataPoints.map((point) => { const data = tooltip?.dataPoints.map((point) => {
return { return {

4
frontend/src/component/insights/componentsChart/ProjectHealthChart/ProjectHealthChart.tsx
View File

@ -14,7 +14,7 @@ import {
import { useTheme } from '@mui/material'; import { useTheme } from '@mui/material';
import type { GroupedDataByProject } from 'component/insights/hooks/useGroupedProjectTrends'; import type { GroupedDataByProject } from 'component/insights/hooks/useGroupedProjectTrends';
import { usePlaceholderData } from 'component/insights/hooks/usePlaceholderData'; import { usePlaceholderData } from 'component/insights/hooks/usePlaceholderData';
import { useFlag } from '@unleash/proxy-client-react'; import { useUiFlag } from 'hooks/useUiFlag.ts';
interface IProjectHealthChartProps { interface IProjectHealthChartProps {
projectFlagTrends: GroupedDataByProject< projectFlagTrends: GroupedDataByProject<
@ -46,7 +46,7 @@ export const ProjectHealthChart: FC<IProjectHealthChartProps> = ({
const projectsData = useProjectChartData(projectFlagTrends); const projectsData = useProjectChartData(projectFlagTrends);
const theme = useTheme(); const theme = useTheme();
const placeholderData = usePlaceholderData(); const placeholderData = usePlaceholderData();
const healthToTechDebtEnabled = useFlag('healthToTechDebt'); const healthToTechDebtEnabled = useUiFlag('healthToTechDebt');
const aggregateHealthData = useMemo(() => { const aggregateHealthData = useMemo(() => {
const labels = Array.from( const labels = Array.from(

4
frontend/src/component/insights/componentsStat/HealthStats/HealthStats.tsx
View File

@ -1,7 +1,7 @@
import type { FC, ReactNode } from 'react'; import type { FC, ReactNode } from 'react';
import { Box, Divider, Link, styled } from '@mui/material'; import { Box, Divider, Link, styled } from '@mui/material';
import { ReactComponent as InstanceHealthIcon } from 'assets/icons/instance-health.svg'; import { ReactComponent as InstanceHealthIcon } from 'assets/icons/instance-health.svg';
import { useFlag } from '@unleash/proxy-client-react'; import { useUiFlag } from 'hooks/useUiFlag';
interface IHealthStatsProps { interface IHealthStatsProps {
value?: string | number; value?: string | number;
@ -73,7 +73,7 @@ export const HealthStats: FC<IHealthStatsProps> = ({
potentiallyStale, potentiallyStale,
title, title,
}) => { }) => {
const healthToDebtEnabled = useFlag('healthToTechDebt'); const healthToDebtEnabled = useUiFlag('healthToTechDebt');
return ( return (
<StyledContainer> <StyledContainer>

4
frontend/src/component/insights/sections/PerformanceInsights.tsx
View File

@ -23,7 +23,7 @@ import {
StyledWidgetContent, StyledWidgetContent,
StyledWidgetStats, StyledWidgetStats,
} from '../InsightsCharts.styles'; } from '../InsightsCharts.styles';
import { useFlag } from '@unleash/proxy-client-react'; import { useUiFlag } from 'hooks/useUiFlag';
export const PerformanceInsights: FC = () => { export const PerformanceInsights: FC = () => {
const statePrefix = 'performance-'; const statePrefix = 'performance-';
@ -48,7 +48,7 @@ export const PerformanceInsights: FC = () => {
state[`${statePrefix}to`]?.values[0], state[`${statePrefix}to`]?.values[0],
); );
const healthToTechDebtEnabled = useFlag('healthToTechDebt'); const healthToTechDebtEnabled = useUiFlag('healthToTechDebt');
const projects = state[`${statePrefix}project`]?.values ?? [allOption.id]; const projects = state[`${statePrefix}project`]?.values ?? [allOption.id];

4
frontend/src/component/personalDashboard/MyProjects.tsx
View File

@ -39,12 +39,12 @@ import { ActionBox } from './ActionBox.tsx';
import useLoading from 'hooks/useLoading'; import useLoading from 'hooks/useLoading';
import { NoProjectsContactAdmin } from './NoProjectsContactAdmin.tsx'; import { NoProjectsContactAdmin } from './NoProjectsContactAdmin.tsx';
import { AskOwnerToAddYouToTheirProject } from './AskOwnerToAddYouToTheirProject.tsx'; import { AskOwnerToAddYouToTheirProject } from './AskOwnerToAddYouToTheirProject.tsx';
import { useFlag } from '@unleash/proxy-client-react'; import { useUiFlag } from 'hooks/useUiFlag.ts';
const ActiveProjectDetails: FC<{ const ActiveProjectDetails: FC<{
project: PersonalDashboardSchemaProjectsItem; project: PersonalDashboardSchemaProjectsItem;
}> = ({ project }) => { }> = ({ project }) => {
const healthToTechDebtEnabled = useFlag('healthToTechDebt'); const healthToTechDebtEnabled = useUiFlag('healthToTechDebt');
const techicalDebt = project.technicalDebt; const techicalDebt = project.technicalDebt;
return ( return (

6
frontend/src/component/personalDashboard/ProjectSetupComplete.tsx
View File

@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
import Lightbulb from '@mui/icons-material/LightbulbOutlined'; import Lightbulb from '@mui/icons-material/LightbulbOutlined';
import type { PersonalDashboardProjectDetailsSchemaInsights } from 'openapi'; import type { PersonalDashboardProjectDetailsSchemaInsights } from 'openapi';
import { ActionBox } from './ActionBox.tsx'; import { ActionBox } from './ActionBox.tsx';
import { useFlag } from '@unleash/proxy-client-react'; import { useUiFlag } from 'hooks/useUiFlag.ts';
const PercentageScore = styled('span')(({ theme }) => ({ const PercentageScore = styled('span')(({ theme }) => ({
fontWeight: theme.typography.fontWeightBold, fontWeight: theme.typography.fontWeightBold,
@ -58,7 +58,7 @@ const ProjectHealthMessage: FC<{
insights: PersonalDashboardProjectDetailsSchemaInsights; insights: PersonalDashboardProjectDetailsSchemaInsights;
project: string; project: string;
}> = ({ trend, insights, project }) => { }> = ({ trend, insights, project }) => {
const healthToTechDebtEnabled = useFlag('healthToTechDebt'); const healthToTechDebtEnabled = useUiFlag('healthToTechDebt');
const { avgHealthCurrentWindow, avgHealthPastWindow, health } = insights; const { avgHealthCurrentWindow, avgHealthPastWindow, health } = insights;
const improveMessage = healthToTechDebtEnabled const improveMessage = healthToTechDebtEnabled
? 'Remember to archive your stale feature flags to keep the technical debt low.' ? 'Remember to archive your stale feature flags to keep the technical debt low.'
@ -202,7 +202,7 @@ export const ProjectSetupComplete: FC<{
project: string; project: string;
insights: PersonalDashboardProjectDetailsSchemaInsights; insights: PersonalDashboardProjectDetailsSchemaInsights;
}> = ({ project, insights }) => { }> = ({ project, insights }) => {
const healthToTechDebtEnabled = useFlag('healthToTechDebt'); const healthToTechDebtEnabled = useUiFlag('healthToTechDebt');
const projectHealthTrend = determineProjectHealthTrend(insights); const projectHealthTrend = determineProjectHealthTrend(insights);
return ( return (

6
frontend/src/component/project/Project/ProjectStatus/ProjectHealth.tsx
View File

@ -5,8 +5,8 @@ import { useProjectStatus } from 'hooks/api/getters/useProjectStatus/useProjectS
import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
import { HealthGridTile } from './ProjectHealthGrid.styles'; import { HealthGridTile } from './ProjectHealthGrid.styles';
import { PrettifyLargeNumber } from 'component/common/PrettifyLargeNumber/PrettifyLargeNumber'; import { PrettifyLargeNumber } from 'component/common/PrettifyLargeNumber/PrettifyLargeNumber';
import { useFlag } from '@unleash/proxy-client-react';
import { getTechnicalDebtColor } from 'utils/getTechnicalDebtColor.ts'; import { getTechnicalDebtColor } from 'utils/getTechnicalDebtColor.ts';
import { useUiFlag } from 'hooks/useUiFlag';
const ChartRadius = 40; const ChartRadius = 40;
const ChartStrokeWidth = 13; const ChartStrokeWidth = 13;
@ -119,7 +119,7 @@ export const ProjectHealth = () => {
} = useProjectStatus(projectId); } = useProjectStatus(projectId);
const { isOss } = useUiConfig(); const { isOss } = useUiConfig();
const theme = useTheme(); const theme = useTheme();
const healthToDebtEnabled = useFlag('healthToTechDebt'); const healthToDebtEnabled = useUiFlag('healthToTechDebt');
const circumference = 2 * Math.PI * ChartRadius; const circumference = 2 * Math.PI * ChartRadius;
const healthRating = health.current; const healthRating = health.current;
@ -188,7 +188,7 @@ export const ProjectHealth = () => {
{healthToDebtEnabled ? ( {healthToDebtEnabled ? (
<> <>
Your current technical debt rating is{' '} Your current technical debt rating is{' '}
{technicalDebt}%. {technicalDebt.current}%.
</> </>
) : ( ) : (
<> <>

4
frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx
View File

@ -9,7 +9,7 @@ import { ProjectHealthGrid } from './ProjectHealthGrid.tsx';
import { useFeedback } from 'component/feedbackNew/useFeedback'; import { useFeedback } from 'component/feedbackNew/useFeedback';
import FeedbackIcon from '@mui/icons-material/ChatOutlined'; import FeedbackIcon from '@mui/icons-material/ChatOutlined';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; 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 }) => ({ const ModalContentContainer = styled('section')(({ theme }) => ({
minHeight: '100vh', minHeight: '100vh',
@ -141,7 +141,7 @@ export const ProjectStatusModal = ({ open, onClose, onFollowLink }: Props) => {
}); });
}; };
const { isOss } = useUiConfig(); const { isOss } = useUiConfig();
const healthToDebtEnabled = useFlag('healthToTechDebt'); const healthToDebtEnabled = useUiFlag('healthToTechDebt');
return ( return (
<DynamicSidebarModal <DynamicSidebarModal

1
frontend/src/interfaces/uiConfig.ts
View File

@ -90,6 +90,7 @@ export type UiFlags = {
customMetrics?: boolean; customMetrics?: boolean;
lifecycleMetrics?: boolean; lifecycleMetrics?: boolean;
createFlagDialogCache?: boolean; createFlagDialogCache?: boolean;
healthToTechDebt?: boolean;
}; };
export interface IVersionInfo { export interface IVersionInfo {