diff --git a/.changeset/wild-glasses-drop.md b/.changeset/wild-glasses-drop.md new file mode 100644 index 00000000..16b51180 --- /dev/null +++ b/.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 diff --git a/plugins/backstage-opa-policies/src/components/OpaPolicyComponent/OpaPolicyComponent.test.tsx b/plugins/backstage-opa-policies/src/components/OpaPolicyComponent/OpaPolicyComponent.test.tsx index 8a030e5e..f95e3e51 100644 --- a/plugins/backstage-opa-policies/src/components/OpaPolicyComponent/OpaPolicyComponent.test.tsx +++ b/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(); }); }); diff --git a/plugins/backstage-opa-policies/src/components/OpaPolicyComponent/OpaPolicyComponent.tsx b/plugins/backstage-opa-policies/src/components/OpaPolicyComponent/OpaPolicyComponent.tsx index b3deecd9..d161f1f1 100644 --- a/plugins/backstage-opa-policies/src/components/OpaPolicyComponent/OpaPolicyComponent.tsx +++ b/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(null); const [loading, setLoading] = useState(true); const opaApi = useApi(opaPolicyBackendApiRef); @@ -47,14 +51,21 @@ export const OpaPolicyPage = () => { + } > - + showLineNumbers + > + {policy?.opaPolicyContent ?? ''} + );