cost-insights: move hideTrendLine to config

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

.changeset/ten-seals-wait.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-cost-insights': patch
+---
+
+The experimental plugin configuration has been removed. The trend line can now instead be hidden by setting `costInsights.hideTrendLine` to `true` in the configuration.

plugins/cost-insights/api-report.md

@@ -242,6 +242,7 @@ export type ConfigContextProps = {
   icons: Icon[];
   engineerCost: number;
   engineerThreshold: number;
+  hideTrendLine: boolean;
   currencies: Currency[];
 };
 
@@ -326,8 +327,7 @@ const costInsightsPlugin: BackstagePlugin<
     growthAlerts: RouteRef<undefined>;
     unlabeledDataflowAlerts: RouteRef<undefined>;
   },
-  {},
-  CostInsightsInputPluginOptions
+  {}
 >;
 export { costInsightsPlugin };
 export { costInsightsPlugin as plugin };

plugins/cost-insights/config.d.ts

@@ -26,6 +26,11 @@ export interface Config {
      */
     engineerThreshold?: number;
 
+    /**
+     * @visibility frontend
+     */
+    hideTrendLine?: boolean;
+
     /**
      * @visibility frontend
      */

plugins/cost-insights/src/components/CostOverviewCard/CostOverviewCard.test.tsx

@@ -15,7 +15,6 @@
  */
 import React from 'react';
 import { fireEvent } from '@testing-library/react';
-import { MockPluginProvider } from '@backstage/test-utils/alpha';
 import { renderInTestApp } from '@backstage/test-utils';
 import { CostOverviewCard } from './CostOverviewCard';
 import { Cost } from '@backstage/plugin-cost-insights-common';
@@ -45,9 +44,7 @@ function renderInContext(children: JSX.Element) {
       <MockConfigProvider>
         <MockFilterProvider>
           <MockBillingDateProvider>
-            <MockScrollProvider>
-              <MockPluginProvider>{children}</MockPluginProvider>
-            </MockScrollProvider>
+            <MockScrollProvider>{children}</MockScrollProvider>
           </MockBillingDateProvider>
         </MockFilterProvider>
       </MockConfigProvider>

plugins/cost-insights/src/components/CostOverviewCard/CostOverviewChart.tsx

@@ -47,7 +47,6 @@ import { groupByDate, trendFrom } from '../../utils/charts';
 import { aggregationSort } from '../../utils/sort';
 import { CostOverviewLegend } from './CostOverviewLegend';
 import { TooltipRenderer } from '../../types';
-import { useCostInsightsOptions } from '../../options';
 import { useConfig } from '../../hooks';
 
 type CostOverviewChartProps = {
@@ -65,7 +64,7 @@ export const CostOverviewChart = ({
 }: CostOverviewChartProps) => {
   const theme = useTheme<CostInsightsTheme>();
   const styles = useStyles(theme);
-  const { baseCurrency } = useConfig();
+  const { baseCurrency, hideTrendLine } = useConfig();
 
   const data = {
     dailyCost: {
@@ -134,7 +133,6 @@ export const CostOverviewChart = ({
     );
   };
 
-  const { hideTrendLine } = useCostInsightsOptions();
   const localizedTickFormatter = formatGraphValue(baseCurrency);
 
   return (

plugins/cost-insights/src/components/EntityCosts/EntityCost.test.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 import React from 'react';
-import { MockPluginProvider } from '@backstage/test-utils/alpha';
 import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
 import {
   changeOf,
@@ -65,9 +64,7 @@ function renderInContext(children: JSX.Element) {
               <MockFilterProvider>
                 <MockBillingDateProvider>
                   <MockScrollProvider>
-                    <MockScrollProvider>
-                      <MockPluginProvider>{children}</MockPluginProvider>
-                    </MockScrollProvider>
+                    <MockScrollProvider>{children}</MockScrollProvider>
                   </MockScrollProvider>
                 </MockBillingDateProvider>
               </MockFilterProvider>

plugins/cost-insights/src/hooks/useConfig.tsx

@@ -72,6 +72,7 @@ export type ConfigContextProps = {
   icons: Icon[];
   engineerCost: number;
   engineerThreshold: number;
+  hideTrendLine: boolean;
   currencies: Currency[];
 };
 
@@ -86,6 +87,7 @@ const defaultState: ConfigContextProps = {
   icons: [],
   engineerCost: 0,
   engineerThreshold: EngineerThreshold,
+  hideTrendLine: false,
   currencies: defaultCurrencies,
 };
 
@@ -193,12 +195,20 @@ export const ConfigProvider = ({ children }: PropsWithChildren<{}>) => {
       );
     }
 
+    function getHideTrendLine(): boolean {
+      return (
+        c.getOptionalBoolean('costInsights.hideTrendLine') ??
+        defaultState.hideTrendLine
+      );
+    }
+
     function getConfig() {
       const baseCurrency = getBaseCurrency();
       const products = getProducts();
       const metrics = getMetrics();
       const engineerCost = getEngineerCost();
       const engineerThreshold = getEngineerThreshold();
+      const hideTrendLine = getHideTrendLine();
       const icons = getIcons();
       const currencies = getCurrencies();
 
@@ -212,6 +222,7 @@ export const ConfigProvider = ({ children }: PropsWithChildren<{}>) => {
         products,
         engineerCost,
         engineerThreshold,
+        hideTrendLine,
         icons,
         currencies,
       }));

plugins/cost-insights/src/options.ts

@@ -1,29 +0,0 @@
-/*
- * Copyright 2020 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { usePluginOptions } from '@backstage/core-plugin-api/alpha';
-
-export type CostInsightsPluginOptions = {
-  hideTrendLine?: boolean;
-};
-
-/** @ignore */
-export type CostInsightsInputPluginOptions = {
-  hideTrendLine?: boolean;
-};
-
-export const useCostInsightsOptions = () =>
-  usePluginOptions<CostInsightsPluginOptions>();

plugins/cost-insights/src/plugin.ts

@@ -19,10 +19,6 @@ import {
   createRouteRef,
   createRoutableExtension,
 } from '@backstage/core-plugin-api';
-import {
-  CostInsightsInputPluginOptions,
-  CostInsightsPluginOptions,
-} from './options';
 
 export const rootRouteRef = createRouteRef({
   id: 'cost-insights',
@@ -45,14 +41,6 @@ export const costInsightsPlugin = createPlugin({
     growthAlerts: projectGrowthAlertRef,
     unlabeledDataflowAlerts: unlabeledDataflowAlertRef,
   },
-  __experimentalConfigure(
-    options?: CostInsightsInputPluginOptions,
-  ): CostInsightsPluginOptions {
-    const defaultOptions = {
-      hideTrendLine: false,
-    };
-    return { ...defaultOptions, ...options };
-  },
 });
 
 /** @public */

plugins/cost-insights/src/testUtils/providers.tsx

@@ -96,6 +96,7 @@ export const MockConfigProvider = (props: MockConfigProviderProps) => {
     icons: [],
     engineerCost: 0,
     engineerThreshold: EngineerThreshold,
+    hideTrendLine: false,
     currencies: [],
   };