Using EmptyState in Github Actions Plugin (#2680)

* display EmptyState when no CI/CD is avialable

* change padding and title size

* add EmptyState to gitHubActionPlugin

* fix test failing

* add MissingAnnotationEmptyState

* add MissingAnnotationEmptyState to storybook

* add highlightedNumbers feature to Codesnippet

* use the new component in github actions and update README

* remove entity from MissingAnnotationEmptyState

* remove proptypes from Codesnippet

Co-authored-by: Samira Mokaram <samiram@spotify.com>

packages/app/src/components/catalog/EntityPage.tsx

@@ -47,8 +47,8 @@ import {
   useEntity,
 } from '@backstage/plugin-catalog';
 import { Entity } from '@backstage/catalog-model';
-import { Grid } from '@material-ui/core';
-import { WarningPanel } from '@backstage/core';
+import { Button, Grid } from '@material-ui/core';
+import { EmptyState } from '@backstage/core';
 
 const CICDSwitcher = ({ entity }: { entity: Entity }) => {
   // This component is just an example of how you can implement your company's logic in entity page.
@@ -66,10 +66,20 @@ const CICDSwitcher = ({ entity }: { entity: Entity }) => {
       return <TravisCIRouter entity={entity} />;
     default:
       return (
-        <WarningPanel title="CI/CD switcher:">
-          No CI/CD is available for this entity. Check corresponding
-          annotations!
-        </WarningPanel>
+        <EmptyState
+          title="No CI/CD available for this entity"
+          missing="info"
+          description="You need to add an annotation to your component if you want to enable CI/CD for it. You can read more about annotations in Backstage by clicking the button below."
+          action={
+            <Button
+              variant="contained"
+              color="primary"
+              href="https://backstage.io/docs/features/software-catalog/well-known-annotations"
+            >
+              Read more
+            </Button>
+          }
+        />
       );
   }
 };

packages/core/src/components/CodeSnippet/CodeSnippet.tsx

@@ -14,8 +14,7 @@
  * limitations under the License.
  */
 
-import React, { FC } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { docco, dark } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
 import { useTheme } from '@material-ui/core';
@@ -27,19 +26,16 @@ type Props = {
   language: string;
   showLineNumbers?: boolean;
   showCopyCodeButton?: boolean;
+  highlightedNumbers?: number[];
 };
 
-const defaultProps = {
-  showLineNumbers: false,
-  showCopyCodeButton: false,
-};
-
-export const CodeSnippet: FC<Props> = props => {
-  const { text, language, showLineNumbers, showCopyCodeButton } = {
-    ...defaultProps,
-    ...props,
-  };
-
+export const CodeSnippet = ({
+  text,
+  language,
+  showLineNumbers = false,
+  showCopyCodeButton = false,
+  highlightedNumbers,
+}: Props) => {
   const theme = useTheme<BackstageTheme>();
   const mode = theme.palette.type === 'dark' ? dark : docco;
 
@@ -49,6 +45,12 @@ export const CodeSnippet: FC<Props> = props => {
         language={language}
         style={mode}
         showLineNumbers={showLineNumbers}
+        wrapLines
+        lineProps={(lineNumber: number) =>
+          highlightedNumbers?.includes(lineNumber)
+            ? { style: { backgroundColor: '#e6ffed' } }
+            : {}
+        }
       >
         {text}
       </SyntaxHighlighter>
@@ -60,11 +62,3 @@ export const CodeSnippet: FC<Props> = props => {
     </div>
   );
 };
-
-// Type check for the JS files using this core component
-CodeSnippet.propTypes = {
-  text: PropTypes.string.isRequired,
-  language: PropTypes.string.isRequired,
-  showLineNumbers: PropTypes.bool,
-  showCopyCodeButton: PropTypes.bool,
-};

packages/core/src/components/EmptyState/EmptyState.stories.tsx

@@ -17,6 +17,7 @@
 import React from 'react';
 import { EmptyState } from './EmptyState';
 import { Button } from '@material-ui/core';
+import { MissingAnnotationEmptyState } from './MissingAnnotationEmptyState';
 
 export default {
   title: 'EmptyState',
@@ -25,7 +26,7 @@ export default {
 
 const containerStyle = { width: '100%', height: '100vh' };
 
-export const MissingAnnotation = () => (
+export const Field = () => (
   <div style={containerStyle}>
     <EmptyState
       missing="field"
@@ -35,7 +36,7 @@ export const MissingAnnotation = () => (
   </div>
 );
 
-export const NoInformation = () => (
+export const Info = () => (
   <div style={containerStyle}>
     <EmptyState
       missing="info"
@@ -45,7 +46,7 @@ export const NoInformation = () => (
   </div>
 );
 
-export const CreateComponent = () => (
+export const Content = () => (
   <div style={containerStyle}>
     <EmptyState
       missing="content"
@@ -55,7 +56,7 @@ export const CreateComponent = () => (
   </div>
 );
 
-export const NoBuild = () => (
+export const Data = () => (
   <div style={containerStyle}>
     <EmptyState
       missing="data"
@@ -79,3 +80,9 @@ export const WithAction = () => (
     />
   </div>
 );
+
+export const MissingAnnotation = () => (
+  <div style={containerStyle}>
+    <MissingAnnotationEmptyState annotation="backstage.io/example" />
+  </div>
+);

packages/core/src/components/EmptyState/EmptyState.tsx

@@ -22,7 +22,7 @@ import Background from './assets/Background.svg';
 const useStyles = makeStyles(theme => ({
   root: {
     backgroundColor: theme.palette.background.default,
-    padding: theme.spacing(10, 0, 0, 0),
+    padding: theme.spacing(2, 0, 0, 0),
   },
   action: {
     marginTop: theme.spacing(2),
@@ -56,7 +56,7 @@ export const EmptyState = ({ title, description, missing, action }: Props) => {
     >
       <Grid item container direction="column" xs={12} md={6}>
         <Grid item>
-          <Typography variant="h3">{title}</Typography>
+          <Typography variant="h5">{title}</Typography>
         </Grid>
         <Grid item>
           <Typography variant="body1">{description}</Typography>

packages/core/src/components/EmptyState/MissingAnnotationEmptyState.tsx

@@ -0,0 +1,69 @@
+/*
+ * 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 { Button, Typography } from '@material-ui/core';
+import { EmptyState } from './EmptyState';
+import { CodeSnippet } from '../CodeSnippet';
+
+const COMPONENT_YAML = `# Example
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: backstage
+  description: backstage.io
+  annotations:
+    ANNOTATION: value
+spec:
+  type: website
+  lifecycle: production
+  owner: guest
+`;
+
+type Props = {
+  annotation: string;
+};
+
+export const MissingAnnotationEmptyState = ({ annotation }: Props) => {
+  return (
+    <EmptyState
+      missing="field"
+      title="Missing Annotation"
+      description={`The "${annotation}" annotation is missing. You need to add the annotation to your component if you want to enable this tool for it.`}
+      action={
+        <>
+          <Typography variant="body1">
+            Add the annotation to your component YAML as per the highlighted
+            example below:
+          </Typography>
+          <CodeSnippet
+            text={COMPONENT_YAML.replace('ANNOTATION', annotation)}
+            language="yaml"
+            showLineNumbers
+            highlightedNumbers={[7, 8]}
+          />
+          <Button
+            variant="contained"
+            color="primary"
+            href="https://backstage.io/docs/features/software-catalog/well-known-annotations"
+          >
+            Read more
+          </Button>
+        </>
+      }
+    />
+  );
+};

packages/core/src/components/EmptyState/index.ts

@@ -15,3 +15,4 @@
  */
 
 export { EmptyState } from './EmptyState';
+export { MissingAnnotationEmptyState } from './MissingAnnotationEmptyState';