config-schema: switch schema type and separate out SchemaViewer

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

plugins/config-schema/dev/index.tsx

@@ -15,6 +15,7 @@
  */
 
 import { createDevApp } from '@backstage/dev-utils';
+import { Schema } from 'jsonschema';
 import React from 'react';
 import Observable from 'zen-observable';
 import { configSchemaApiRef } from '../src/api';
@@ -30,7 +31,7 @@ createDevApp()
     factory: () => ({
       schema$: () =>
         new Observable<ConfigSchemaResult>(sub =>
-          sub.next({ schema: exampleSchema }),
+          sub.next({ schema: (exampleSchema as unknown) as Schema }),
         ),
     }),
   })

plugins/config-schema/package.json

@@ -26,6 +26,7 @@
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.45",
+    "jsonschema": "^1.2.6",
     "zen-observable": "^0.8.15",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

plugins/config-schema/src/api/types.ts

@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { JsonObject } from '@backstage/config';
 import { createApiRef, Observable } from '@backstage/core';
+import { Schema } from 'jsonschema';
 
 export interface ConfigSchemaResult {
-  schema?: JsonObject;
+  schema?: Schema;
 }
 
 export interface ConfigSchemaApi {

plugins/config-schema/src/components/ConfigSchemaPage/ConfigSchemaPage.tsx

@@ -22,17 +22,17 @@ import {
   ContentHeader,
   HeaderLabel,
   SupportButton,
-  CodeSnippet,
   useApi,
 } from '@backstage/core';
 import { useObservable } from 'react-use';
 import { configSchemaApiRef } from '../../api';
+import { SchemaViewer } from '../SchemaViewer';
 
 export const ConfigSchemaPage = () => {
   const configSchemaApi = useApi(configSchemaApiRef);
   const schema = useObservable(
     useMemo(() => configSchemaApi.schema$(), [configSchemaApi]),
-  );
+  )?.schema;
 
   return (
     <Page themeId="tool">
@@ -46,14 +46,7 @@ export const ConfigSchemaPage = () => {
         </ContentHeader>
         <Grid container spacing={3} direction="column">
           <Grid item>
-            {schema ? (
-              <CodeSnippet
-                language="json"
-                text={JSON.stringify(schema, null, 2)}
-              />
-            ) : (
-              'No schema available'
-            )}
+            {schema ? <SchemaViewer schema={schema} /> : 'No schema available'}
           </Grid>
         </Grid>
       </Content>

plugins/config-schema/src/components/SchemaViewer/SchemaViewer.tsx

@@ -0,0 +1,26 @@
+/*
+ * Copyright 2021 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 { CodeSnippet } from '@backstage/core';
+import { Schema } from 'jsonschema';
+
+export interface SchemaViewerProps {
+  schema: Schema;
+}
+
+export const SchemaViewer = ({ schema }: SchemaViewerProps) => {
+  return <CodeSnippet language="json" text={JSON.stringify(schema, null, 2)} />;
+};

plugins/config-schema/src/components/SchemaViewer/index.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2021 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.
+ */
+
+export { SchemaViewer } from './SchemaViewer';