Merge pull request #14654 from acierto/cost-insight-trending-line

Making a possibility to hide a trending line in a cost insights plugin

.changeset/gold-yaks-join.md

@@ -0,0 +1,6 @@
+---
+'@backstage/test-utils': patch
+---
+
+The test utility for the plugin context called `MockPluginProvider` has been created. It will be handy in the cases when you use
+`__experimentalConfigure` in your plugin. It is experimental and exported through `@backstage/test-utils/alpha`.

.changeset/yellow-forks-knock.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-cost-insights': patch
+---
+
+Making a possibility to hide a trending line in a cost insights plugin

packages/test-utils/api-report.md

@@ -25,6 +25,7 @@ import { JsonObject } from '@backstage/types';
 import { JsonValue } from '@backstage/types';
 import { Observable } from '@backstage/types';
 import { PermissionApi } from '@backstage/plugin-permission-react';
+import { PropsWithChildren } from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { RenderOptions } from '@testing-library/react';
@@ -165,6 +166,11 @@ export class MockPermissionApi implements PermissionApi {
   ): Promise<EvaluatePermissionResponse>;
 }
 
+// @alpha
+export const MockPluginProvider: ({
+  children,
+}: PropsWithChildren<{}>) => JSX.Element;
+
 // @public
 export class MockStorageApi implements StorageApi {
   // (undocumented)

packages/test-utils/package.json

@@ -5,7 +5,8 @@
   "publishConfig": {
     "access": "public",
     "main": "dist/index.esm.js",
-    "types": "dist/index.d.ts"
+    "types": "dist/index.d.ts",
+    "alphaTypes": "dist/index.alpha.d.ts"
   },
   "backstage": {
     "role": "web-library"
@@ -23,7 +24,7 @@
   "main": "src/index.ts",
   "types": "src/index.ts",
   "scripts": {
-    "build": "backstage-cli package build",
+    "build": "backstage-cli package build --experimental-type-build",
     "lint": "backstage-cli package lint",
     "test": "backstage-cli package test",
     "prepack": "backstage-cli package prepack",
@@ -60,6 +61,7 @@
     "msw": "^0.49.0"
   },
   "files": [
-    "dist"
+    "dist",
+    "alpha"
   ]
 }

packages/test-utils/src/testUtils/index.tsx

@@ -24,6 +24,7 @@ export {
 export type { TestAppOptions } from './appWrappers';
 export * from './msw';
 export * from './logCollector';
+export * from './providers';
 export * from './testingLibrary';
 export { TestApiProvider, TestApiRegistry } from './TestApiProvider';
 export type { TestApiProviderProps } from './TestApiProvider';

packages/test-utils/src/testUtils/providers.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 React, { PropsWithChildren } from 'react';
+import { createPlugin, PluginProvider } from '@backstage/core-plugin-api';
+
+/**
+ * Mock for PluginProvider to use in unit tests
+ * @alpha
+ */
+export const MockPluginProvider = ({ children }: PropsWithChildren<{}>) => {
+  type TestInputPluginOptions = {};
+  type TestPluginOptions = {};
+  const plugin = createPlugin({
+    id: 'my-plugin',
+    __experimentalConfigure(_: TestInputPluginOptions): TestPluginOptions {
+      return {};
+    },
+  });
+
+  return <PluginProvider plugin={plugin}>{children}</PluginProvider>;
+};

plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.test.tsx

@@ -23,21 +23,20 @@ import {
 } from '@backstage/catalog-model';
 import { TableColumn, TableProps } from '@backstage/core-components';
 import {
-  createPlugin,
   IdentityApi,
   identityApiRef,
-  PluginProvider,
   ProfileInfo,
   storageApiRef,
 } from '@backstage/core-plugin-api';
 import {
   catalogApiRef,
   entityRouteRef,
-  starredEntitiesApiRef,
   MockStarredEntitiesApi,
+  starredEntitiesApiRef,
 } from '@backstage/plugin-catalog-react';
 import {
   mockBreakpoint,
+  MockPluginProvider,
   MockStorageApi,
   renderWithEffects,
   TestApiProvider,
@@ -135,22 +134,6 @@ describe('DefaultCatalogPage', () => {
   };
   const storageApi = MockStorageApi.create();
 
-  type TestInputPluginOptions = {
-    'key-1': string;
-  };
-
-  type TestPluginOptions = {
-    'key-1': string;
-    'key-2': string;
-  };
-
-  const plugin = createPlugin({
-    id: 'my-plugin',
-    __experimentalConfigure(_: TestInputPluginOptions): TestPluginOptions {
-      return { 'key-1': 'value-1', 'key-2': 'value-2' };
-    },
-  });
-
   const renderWrapped = (children: React.ReactNode) =>
     renderWithEffects(
       wrapInTestApp(
@@ -162,7 +145,7 @@ describe('DefaultCatalogPage', () => {
             [starredEntitiesApiRef, new MockStarredEntitiesApi()],
           ]}
         >
-          <PluginProvider plugin={plugin}>{children}</PluginProvider>
+          <MockPluginProvider>{children}</MockPluginProvider>
         </TestApiProvider>,
         {
           mountedRoutes: {

plugins/cost-insights/api-report.md

@@ -322,7 +322,7 @@ const costInsightsPlugin: BackstagePlugin<
     unlabeledDataflowAlerts: RouteRef<undefined>;
   },
   {},
-  {}
+  CostInsightsInputPluginOptions
 >;
 export { costInsightsPlugin };
 export { costInsightsPlugin as plugin };

plugins/cost-insights/package.json

@@ -38,6 +38,7 @@
     "@backstage/core-plugin-api": "workspace:^",
     "@backstage/plugin-catalog-react": "workspace:^",
     "@backstage/plugin-cost-insights-common": "workspace:^",
+    "@backstage/test-utils": "workspace:^",
     "@backstage/theme": "workspace:^",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",

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

@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import { fireEvent } from '@testing-library/react';
-import { renderInTestApp } from '@backstage/test-utils';
+import { MockPluginProvider, renderInTestApp } from '@backstage/test-utils';
 import { CostOverviewCard } from './CostOverviewCard';
 import { Cost } from '@backstage/plugin-cost-insights-common';
 import {
@@ -23,11 +23,11 @@ import {
   getGroupedProducts,
   getGroupedProjects,
   MockAggregatedDailyCosts,
-  trendlineOf,
   MockBillingDateProvider,
   MockConfigProvider,
   MockFilterProvider,
   MockScrollProvider,
+  trendlineOf,
 } from '../../testUtils';
 import { CostInsightsThemeProvider } from '../CostInsightsPage/CostInsightsThemeProvider';
 
@@ -44,7 +44,9 @@ function renderInContext(children: JSX.Element) {
       <MockConfigProvider>
         <MockFilterProvider>
           <MockBillingDateProvider>
-            <MockScrollProvider>{children}</MockScrollProvider>
+            <MockScrollProvider>
+              <MockPluginProvider>{children}</MockPluginProvider>
+            </MockScrollProvider>
           </MockBillingDateProvider>
         </MockFilterProvider>
       </MockConfigProvider>

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

@@ -47,6 +47,7 @@ import { groupByDate, toDataMax, 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 = {
@@ -133,6 +134,8 @@ export const CostOverviewChart = ({
     );
   };
 
+  const { hideTrendLine } = useCostInsightsOptions();
+
   return (
     <Box display="flex" flexDirection="column">
       <CostOverviewLegend
@@ -178,15 +181,17 @@ export const CostOverviewChart = ({
             stroke="none"
             yAxisId={data.dailyCost.dataKey}
           />
-          <Line
-            activeDot={false}
-            dataKey="trend"
-            dot={false}
-            isAnimationActive={false}
-            strokeWidth={2}
-            stroke={theme.palette.blue}
-            yAxisId={data.dailyCost.dataKey}
-          />
+          {!hideTrendLine && (
+            <Line
+              activeDot={false}
+              dataKey="trend"
+              dot={false}
+              isAnimationActive={false}
+              strokeWidth={2}
+              stroke={theme.palette.blue}
+              yAxisId={data.dailyCost.dataKey}
+            />
+          )}
           {metric && (
             <Line
               dataKey={data.metric.dataKey}

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

@@ -14,7 +14,11 @@
  * limitations under the License.
  */
 import React from 'react';
-import { renderInTestApp } from '@backstage/test-utils';
+import {
+  MockPluginProvider,
+  renderInTestApp,
+  TestApiProvider,
+} from '@backstage/test-utils';
 import {
   changeOf,
   MockAggregatedDailyCosts,
@@ -26,7 +30,6 @@ import {
 } from '../../testUtils';
 import { CostInsightsThemeProvider } from '../CostInsightsPage/CostInsightsThemeProvider';
 import { EntityCostsCard } from './EntityCosts';
-import { TestApiProvider } from '@backstage/test-utils';
 import { CostInsightsApi, costInsightsApiRef } from '../../api';
 import { EntityProvider } from '@backstage/plugin-catalog-react';
 import { Entity } from '@backstage/catalog-model';
@@ -64,7 +67,11 @@ function renderInContext(children: JSX.Element) {
             <LoadingProvider>
               <MockFilterProvider>
                 <MockBillingDateProvider>
-                  <MockScrollProvider>{children}</MockScrollProvider>
+                  <MockScrollProvider>
+                    <MockScrollProvider>
+                      <MockPluginProvider>{children}</MockPluginProvider>
+                    </MockScrollProvider>
+                  </MockScrollProvider>
                 </MockBillingDateProvider>
               </MockFilterProvider>
             </LoadingProvider>

plugins/cost-insights/src/options.ts

@@ -0,0 +1,29 @@
+/*
+ * 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';
+
+export type CostInsightsPluginOptions = {
+  hideTrendLine?: boolean;
+};
+
+/** @ignore */
+export type CostInsightsInputPluginOptions = {
+  hideTrendLine?: boolean;
+};
+
+export const useCostInsightsOptions = () =>
+  usePluginOptions<CostInsightsPluginOptions>();

plugins/cost-insights/src/plugin.ts

@@ -19,6 +19,10 @@ import {
   createRouteRef,
   createRoutableExtension,
 } from '@backstage/core-plugin-api';
+import {
+  CostInsightsInputPluginOptions,
+  CostInsightsPluginOptions,
+} from './options';
 
 export const rootRouteRef = createRouteRef({
   id: 'cost-insights',
@@ -41,6 +45,14 @@ 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

@@ -15,13 +15,22 @@
  */
 
 import React, { PropsWithChildren } from 'react';
-import { LoadingContext, LoadingContextProps } from '../hooks';
-import { GroupsContext, GroupsContextProps } from '../hooks';
-import { FilterContext, FilterContextProps } from '../hooks';
-import { ConfigContext, ConfigContextProps } from '../hooks';
-import { CurrencyContext, CurrencyContextProps } from '../hooks';
-import { BillingDateContext, BillingDateContextProps } from '../hooks';
-import { ScrollContext, ScrollContextProps } from '../hooks';
+import {
+  LoadingContext,
+  LoadingContextProps,
+  GroupsContext,
+  GroupsContextProps,
+  FilterContext,
+  FilterContextProps,
+  ConfigContext,
+  ConfigContextProps,
+  CurrencyContext,
+  CurrencyContextProps,
+  BillingDateContext,
+  BillingDateContextProps,
+  ScrollContext,
+  ScrollContextProps,
+} from '../hooks';
 import { Duration } from '../types';
 import { createCurrencyFormat } from '../utils/currency';