refactor: [M3-8097] - Retire recharts feature flag (#10483)

* Initial commit: save work * remove other flag instances * remove extranuous comments * Added changeset: Retire recharts feature flag * feedback @hana-linode - LineGraph deprecation comments
linode · May 20, 2024 · 69c7c15 · 69c7c15
1 parent 4b4a3da
commit 69c7c15
Show file tree

Hide file tree

Showing 10 changed files with 341 additions and 709 deletions.
diff --git a/packages/manager/.changeset/pr-10483-tech-stories-1715958313413.md b/packages/manager/.changeset/pr-10483-tech-stories-1715958313413.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Retire recharts feature flag ([#10483](https://github.com/linode/manager/pull/10483))
diff --git a/packages/manager/src/components/LineGraph/AccessibleGraphData.tsx b/packages/manager/src/components/LineGraph/AccessibleGraphData.tsx
@@ -1,3 +1,7 @@
+/**
+ * ONLY USED IN THE LINE GRAPH COMPONENT (Longview)
+ * Delete when LineGraph is sunsetted
+ */
 import { visuallyHidden } from '@mui/utils';
 import { DateTime } from 'luxon';
 import * as React from 'react';
@@ -13,8 +17,6 @@ export interface GraphTabledDataProps {
   hiddenDatasets: number[];
 }
 
-// @todo recharts: delete this file when we decide recharts is stable (new version is AccessibleAreaChart)
-
 /**
  * This component is used to provide an accessible representation of the data
  * It does not care about styles, it only cares about presenting the data in bare HTML tables,

diff --git a/packages/manager/src/components/LineGraph/LineGraph.tsx b/packages/manager/src/components/LineGraph/LineGraph.tsx
@@ -1,3 +1,7 @@
+/**
+ * ONLY USED IN LONGVIEW
+ * Delete when Lonview is sunsetted, along with AccessibleGraphData
+ */
 import { Theme, useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import {

diff --git a/packages/manager/src/dev-tools/FeatureFlagTool.tsx b/packages/manager/src/dev-tools/FeatureFlagTool.tsx
@@ -27,7 +27,6 @@ const options: { flag: keyof Flags; label: string }[] = [
   { flag: 'objMultiCluster', label: 'OBJ Multi-Cluster' },
   { flag: 'parentChildAccountAccess', label: 'Parent/Child Account' },
   { flag: 'placementGroups', label: 'Placement Groups' },
-  { flag: 'recharts', label: 'Recharts' },
   { flag: 'selfServeBetas', label: 'Self Serve Betas' },
   { flag: 'supportTicketSeverity', label: 'Support Ticket Severity' },
 ];

diff --git a/packages/manager/src/featureFlags.ts b/packages/manager/src/featureFlags.ts
@@ -79,7 +79,6 @@ export interface Flags {
   productInformationBanners: ProductInformationBannerFlag[];
   promos: boolean;
   promotionalOffers: PromotionalOffer[];
-  recharts: boolean;
   referralBannerText: ReferralBannerText;
   selfServeBetas: boolean;
   soldOutChips: boolean;

diff --git a/...eatures/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferHistory.tsx b/...eatures/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferHistory.tsx
@@ -12,14 +12,11 @@ import { LinodeNetworkTimeData, Point } from 'src/components/AreaChart/types';
 import { Box } from 'src/components/Box';
 import { CircleProgress } from 'src/components/CircleProgress';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
-import { LineGraph } from 'src/components/LineGraph/LineGraph';
 import { Typography } from 'src/components/Typography';
 import {
   convertNetworkToUnit,
-  formatNetworkTooltip,
   generateNetworkUnits,
 } from 'src/features/Longview/shared/utilities';
-import { useFlags } from 'src/hooks/useFlags';
 import {
   STATS_NOT_READY_API_MESSAGE,
   STATS_NOT_READY_MESSAGE,
@@ -39,7 +36,6 @@ export const TransferHistory = React.memo((props: Props) => {
   const { linodeCreated, linodeID } = props;
 
   const theme = useTheme();
-  const flags = useFlags();
 
   // Needed to see the user's timezone.
   const { data: profile } = useProfile();
@@ -84,16 +80,6 @@ export const TransferHistory = React.memo((props: Props) => {
     return convertNetworkToUnit(value, unit);
   };
 
-  /**
-   * formatNetworkTooltip is a helper method from Longview, where
-   * data is expected in bytes. The method does the rounding, unit conversions, etc.
-   * that we want, but it first multiplies by 8 to convert to bits.
-   * APIv4 returns this data in bits to begin with,
-   * so we have to preemptively divide by 8 to counter the conversion inside the helper.
-   */
-  const formatTooltip = (valueInBytes: number) =>
-    formatNetworkTooltip(valueInBytes / 8);
-
   const maxMonthOffset = getOffsetFromDate(
     now,
     DateTime.fromISO(linodeCreated, { zone: 'utc' })
@@ -155,64 +141,39 @@ export const TransferHistory = React.memo((props: Props) => {
       );
     }
 
-    // @TODO recharts: remove conditional code and delete old chart when we decide recharts is stable
-    if (flags?.recharts) {
-      const timeData = combinedData.reduce(
-        (acc: LinodeNetworkTimeData[], point: Point) => {
-          acc.push({
-            'Public Outbound Traffic': convertNetworkData
-              ? convertNetworkData(point[1])
-              : point[1],
-            timestamp: point[0],
-          });
-          return acc;
-        },
-        []
-      );
-
-      return (
-        <Box marginLeft={-5}>
-          <AreaChart
-            areas={[
-              {
-                color: '#1CB35C',
-                dataKey: 'Public Outbound Traffic',
-              },
-            ]}
-            xAxis={{
-              tickFormat: 'LLL dd',
-              tickGap: 15,
-            }}
-            ariaLabel={graphAriaLabel}
-            data={timeData}
-            height={190}
-            timezone={profile?.timezone ?? 'UTC'}
-            unit={` ${unit}/s`}
-          />
-        </Box>
-      );
-    }
+    const timeData = combinedData.reduce(
+      (acc: LinodeNetworkTimeData[], point: Point) => {
+        acc.push({
+          'Public Outbound Traffic': convertNetworkData
+            ? convertNetworkData(point[1])
+            : point[1],
+          timestamp: point[0],
+        });
+        return acc;
+      },
+      []
+    );
 
     return (
-      <LineGraph
-        data={[
-          {
-            backgroundColor: '#1CB35C',
-            borderColor: 'transparent',
-            data: combinedData,
-            label: 'Public Outbound Traffic',
-          },
-        ]}
-        accessibleDataTable={{ unit: 'Kb/s' }}
-        ariaLabel={graphAriaLabel}
-        chartHeight={190}
-        formatData={convertNetworkData}
-        formatTooltip={formatTooltip}
-        showToday={true}
-        tabIndex={-1}
-        timezone={profile?.timezone ?? 'UTC'}
-        unit={`/s`}
-      />
+      <Box marginLeft={-5}>
+        <AreaChart
+          areas={[
+            {
+              color: '#1CB35C',
+              dataKey: 'Public Outbound Traffic',
+            },
+          ]}
+          xAxis={{
+            tickFormat: 'LLL dd',
+            tickGap: 15,
+          }}
+          ariaLabel={graphAriaLabel}
+          data={timeData}
+          height={190}
+          timezone={profile?.timezone ?? 'UTC'}
+          unit={` ${unit}/s`}
+        />
+      </Box>
     );
   };