Revert "Refactor front end code pt 1 (#8438)"

This reverts commit 8c2ed5d.

frontend/src/component/personalDashboard/FlagMetricsChart.tsx

@@ -121,12 +121,10 @@ const useFlagMetrics = (
     environment: string | null,
     hoursBack: number,
 ) => {
-    const {
-        featureMetrics: metrics = [],
-        loading,
-        error,
-    } = useFeatureMetricsRaw(flagName, hoursBack);
-
+    const { featureMetrics: metrics = [], loading } = useFeatureMetricsRaw(
+        flagName,
+        hoursBack,
+    );
     const sortedMetrics = useMemo(() => {
         return [...metrics].sort((metricA, metricB) => {
             return metricA.timestamp.localeCompare(metricB.timestamp);
@@ -153,7 +151,7 @@ const useFlagMetrics = (
         return createBarChartOptions(theme, hoursBack, locationSettings);
     }, [theme, hoursBack, locationSettings]);
 
-    return { data, options, loading, error };
+    return { data, options, loading };
 };
 
 const EnvironmentSelect: FC<{
@@ -224,22 +222,11 @@ export const FlagMetricsChart: FC<{
     const { environment, setEnvironment, activeEnvironments } =
         useMetricsEnvironments(flag.project, flag.name);
 
-    const {
-        data,
-        options,
-        loading,
-        error: metricsError,
-    } = useFlagMetrics(flag.name, environment, hoursBack);
-
-    if (metricsError) {
-        return (
-            <ChartContainer>
-                <PlaceholderFlagMetricsChart
-                    label={`Couldn't fetch metrics for the current flag. This may be a transient error, or your flag name ("${flag.name}") may be causing issues.`}
-                />
-            </ChartContainer>
-        );
-    }
+    const { data, options, loading } = useFlagMetrics(
+        flag.name,
+        environment,
+        hoursBack,
+    );
 
     const noData = data.datasets[0].data.length === 0;
 

frontend/src/component/personalDashboard/Grid.tsx

@@ -58,7 +58,7 @@ export const FlagGrid = styled(ContentGrid)(
 );
 
 export const GridItem = styled('div', {
-    shouldForwardProp: (prop) => !['gridArea'].includes(prop.toString()),
+    shouldForwardProp: (prop) => !['gridArea', 'sx'].includes(prop.toString()),
 })<{ gridArea: string }>(({ theme, gridArea }) => ({
     padding: theme.spacing(2, 4),
     maxHeight: '100%',
@@ -113,20 +113,3 @@ export const StyledList = styled(List)(({ theme }) => ({
         maxHeight: '100%',
     })({ theme }),
 }));
-
-export const StyledCardTitle = styled('div')<{ lines?: number }>(
-    ({ theme, lines = 2 }) => ({
-        fontWeight: theme.typography.fontWeightRegular,
-        fontSize: theme.typography.body1.fontSize,
-        lineClamp: `${lines}`,
-        WebkitLineClamp: lines,
-        lineHeight: '1.2',
-        display: '-webkit-box',
-        boxOrient: 'vertical',
-        textOverflow: 'ellipsis',
-        overflow: 'hidden',
-        alignItems: 'flex-start',
-        WebkitBoxOrient: 'vertical',
-        wordBreak: 'break-word',
-    }),
-);

frontend/src/component/personalDashboard/MyProjects.tsx

@@ -13,6 +13,7 @@ import { ConnectSDK, CreateFlag, ExistingFlag } from './ConnectSDK';
 import { LatestProjectEvents } from './LatestProjectEvents';
 import { RoleAndOwnerInfo } from './RoleAndOwnerInfo';
 import { forwardRef, useEffect, useRef, type FC } from 'react';
+import { StyledCardTitle } from './PersonalDashboard';
 import type {
     PersonalDashboardProjectDetailsSchema,
     PersonalDashboardSchemaAdminsItem,
@@ -27,7 +28,6 @@ import {
     GridItem,
     SpacedGridItem,
     StyledList,
-    StyledCardTitle,
 } from './Grid';
 import { ContactAdmins, DataError } from './ProjectDetailsError';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';