Merge pull request #3827 from backstage/optional-alert-url

feat(cost-insights): Make alert url field optional

.changeset/cost-insights-cuddly-frogs-matter.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-cost-insights': patch
+---
+
+Make alert url field optional

plugins/cost-insights/README.md

@@ -110,4 +110,4 @@ The CostInsightsApi `getAlerts` method may return any type of alert or recommend
 
 The Alert type includes an `element` field to supply the JSX Element that will be rendered in the Cost Insights "Action Items" section; we recommend using Backstage's [InfoCard](https://backstage.io/storybook/?path=/story/layout-information-card--default) and [Recharts](http://recharts.org/en-US/) to show actionable visualizations.
 
-The Alert `url` should link to documentation or instructions for resolving the alert.
+The Alert `url` should link to documentation or instructions for resolving the alert. This may be omitted if no external link is needed.

plugins/cost-insights/src/components/AlertInsights/AlertInsightsSection.test.tsx

@@ -0,0 +1,54 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * 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 from 'react';
+import { AlertInsightsSection } from './AlertInsightsSection';
+import { render } from '@testing-library/react';
+import { Alert } from '../../types';
+import { MockScrollProvider } from '../..';
+
+const mockAlert: Alert = {
+  element: <div />,
+  subtitle:
+    'Wherefore was I to this keen mockery born? When at your hands did I deserve this scorn?',
+  title: 'Mock alert',
+  url: '/cost-insights/test',
+};
+
+describe('<AlertInsightsSection/>', () => {
+  it('Renders alert without exploding', () => {
+    const { getByText } = render(
+      <MockScrollProvider>
+        <AlertInsightsSection alert={mockAlert} number={1} />
+      </MockScrollProvider>,
+    );
+    expect(getByText(mockAlert.title)).toBeInTheDocument();
+    expect(getByText(mockAlert.subtitle)).toBeInTheDocument();
+    expect(getByText('View Instructions')).toBeInTheDocument();
+  });
+
+  it('Hides instructions button if url is not provided', () => {
+    const alert = {
+      ...mockAlert,
+      url: undefined,
+    };
+    const { queryByText } = render(
+      <MockScrollProvider>
+        <AlertInsightsSection alert={alert} number={1} />
+      </MockScrollProvider>,
+    );
+    expect(queryByText('View Instructions')).not.toBeInTheDocument();
+  });
+});

plugins/cost-insights/src/components/AlertInsights/AlertInsightsSection.tsx

@@ -34,12 +34,13 @@ export const AlertInsightsSection = ({
         subtitle={alert.subtitle}
         number={number}
       />
-      <Box textAlign="left" mt={0} mb={4}>
-        <Button variant="contained" color="primary" href={alert.url}>
-          {alert.buttonText || 'View Instructions'}
-        </Button>
-        {/* <Button color="primary">Dismiss notification</Button> */}
-      </Box>
+      {alert.url && (
+        <Box textAlign="left" mt={0} mb={4}>
+          <Button variant="contained" color="primary" href={alert.url}>
+            {alert.buttonText || 'View Instructions'}
+          </Button>
+        </Box>
+      )}
       {alert.element}
     </Box>
   );

plugins/cost-insights/src/types/Alert.ts

@@ -25,7 +25,7 @@ import { Maybe } from './Maybe';
 export type Alert = {
   title: string;
   subtitle: string;
-  url: string;
+  url?: string;
   buttonText?: string; // Default: View Instructions
   element: JSX.Element;
 };