Merge pull request Parsifal-M#246 from Parsifal-M/feature/rego-syntax…

…-highlighting

Adds Rego Syntax Highlighting to the card

.changeset/wild-glasses-drop.md

@@ -0,0 +1,5 @@
+---
+'@parsifal-m/plugin-opa-policies': minor
+---
+
+Adds REGO styling to the card, and a copy to clipboard option, now uses react-syntax-highlighter with prism as the backstage CodeSnippet component is using the light version and does not include rego

plugins/backstage-opa-policies/src/components/OpaPolicyComponent/OpaPolicyComponent.test.tsx

@@ -26,13 +26,13 @@ const mockAlertApi = {
 const mockOpaBackendApi = {
   getPolicyFromRepo: jest
     .fn()
-    .mockResolvedValue({ opaPolicyContent: 'test-policy-content' }),
+    .mockResolvedValue({ opaPolicyContent: 'policy' }),
 };
 
 describe('OpaPolicyPage', () => {
   it('renders without crashing', async () => {
     mockOpaBackendApi.getPolicyFromRepo.mockResolvedValueOnce({
-      opaPolicyContent: 'test-policy-content',
+      opaPolicyContent: 'policy',
     });
     await act(async () => {
       renderInTestApp(
@@ -47,6 +47,6 @@ describe('OpaPolicyPage', () => {
       );
     });
 
-    expect(await screen.findByText('test-policy-content')).toBeInTheDocument();
+    expect(await screen.findByText('policy')).toBeInTheDocument();
   });
 });

plugins/backstage-opa-policies/src/components/OpaPolicyComponent/OpaPolicyComponent.tsx

@@ -1,15 +1,19 @@
 import React, { useState, useEffect } from 'react';
 import {
-  CodeSnippet,
   Content,
   InfoCard,
   Progress,
+  CopyTextButton,
 } from '@backstage/core-components';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { opaPolicyBackendApiRef, OpaPolicy } from '../../api/types';
 import { useApi, alertApiRef } from '@backstage/core-plugin-api';
 import { useEntity } from '@backstage/plugin-catalog-react';
+import { a11yDark, coy } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { useTheme } from '@material-ui/core';
 
 export const OpaPolicyPage = () => {
+  const theme = useTheme();
   const [policy, setPolicy] = useState<OpaPolicy | null>(null);
   const [loading, setLoading] = useState(true);
   const opaApi = useApi(opaPolicyBackendApiRef);
@@ -47,14 +51,21 @@ export const OpaPolicyPage = () => {
       <InfoCard
         title={`${entity.metadata.name} OPA Policy`}
         data-testid="opa-policy-card"
+        action={
+          <CopyTextButton
+            text={policy?.opaPolicyContent ?? ''}
+            tooltipText="Copied policy to clipboard!"
+          />
+        }
       >
-        <CodeSnippet
-          text={policy?.opaPolicyContent ?? ''}
+        <SyntaxHighlighter
           language="rego"
-          showLineNumbers
-          showCopyCodeButton
+          style={theme.palette.type === 'dark' ? a11yDark : coy}
           customStyle={{ background: 'inherit', fontSize: '110%' }}
-        />
+          showLineNumbers
+        >
+          {policy?.opaPolicyContent ?? ''}
+        </SyntaxHighlighter>
       </InfoCard>
     </Content>
   );