Fix some typos and other requested changes

Signed-off-by: ivgo <ivgo@spreadgroup.com>

plugins/vault/src/components/EntityVaultCard/EntityVaultCard.test.tsx

@@ -22,7 +22,7 @@ import { render } from '@testing-library/react';
 import { EntityVaultCard } from './EntityVaultCard';
 import { EntityProvider } from '@backstage/plugin-catalog-react';
 
-describe('EntityVautCard', () => {
+describe('EntityVaultCard', () => {
   const server = setupServer();
   setupRequestMockHandlers(server);
   const entityAnnotationMissing: ComponentEntity = {

plugins/vault/src/components/EntityVaultCard/EntityVaultCard.tsx

@@ -16,61 +16,18 @@
 
 import React from 'react';
 import { useEntity } from '@backstage/plugin-catalog-react';
-import { makeStyles, Typography } from '@material-ui/core';
 import { isVaultAvailable } from '../../conditions';
-import { CodeSnippet, InfoCard, Button } from '@backstage/core-components';
-import { BackstageTheme } from '@backstage/theme';
 import { VAULT_SECRET_PATH_ANNOTATION } from '../../constants';
 import { EntityVaultTable } from '../EntityVaultTable';
-
-const COMPONENT_YAML = `metadata:
-  name: example
-  annotations:
-    ${VAULT_SECRET_PATH_ANNOTATION}: value`;
-
-const useStyles = makeStyles<BackstageTheme>(
-  theme => ({
-    code: {
-      borderRadius: 6,
-      margin: `${theme.spacing(2)}px 0px`,
-      background: theme.palette.type === 'dark' ? '#444' : '#fff',
-    },
-  }),
-  { name: 'BackstageMissingVaultAnnotation' },
-);
+import { MissingAnnotationEmptyState } from '@backstage/core-components';
 
 export const EntityVaultCard = () => {
   const { entity } = useEntity();
-  const classes = useStyles();
 
   if (isVaultAvailable(entity)) {
     return <EntityVaultTable entity={entity} />;
   }
   return (
-    <InfoCard title="Vault">
-      <>
-        <Typography variant="body1">
-          Add the annotation to your component YAML as shown in the highlighted
-          example below:
-        </Typography>
-        <div className={classes.code}>
-          <CodeSnippet
-            text={COMPONENT_YAML}
-            language="yaml"
-            showLineNumbers
-            highlightedNumbers={[3, 4]}
-            customStyle={{ background: 'inherit', fontSize: '115%' }}
-          />
-        </div>
-        <Button
-          color="primary"
-          variant="contained"
-          style={{ textDecoration: 'none' }}
-          to="https://backstage.io/docs/features/software-catalog/well-known-annotations"
-        >
-          Read more
-        </Button>
-      </>
-    </InfoCard>
+    <MissingAnnotationEmptyState annotation={VAULT_SECRET_PATH_ANNOTATION} />
   );
 };