From c36bd357980f143c4fa247b1148c04c63d3edf39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= <freben@gmail.com>
Date: Tue, 10 Dec 2024 15:13:41 +0100
Subject: [PATCH] break circular imports
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Fredrik Adelöw <freben@gmail.com>
---
 .changeset/good-pens-dance.md                 |   6 +
 .../EntityAutocompletePicker.tsx              |   2 +-
 .../UserListPicker/useAllEntitiesCount.ts     |   2 +-
 .../UserListPicker/useOwnedEntitiesCount.ts   |   2 +-
 .../UserListPicker/useStarredEntitiesCount.ts |   2 +-
 plugins/catalog-react/src/filters.ts          |   2 +-
 .../src/hooks/useEntityListProvider.tsx       |   2 +-
 plugins/catalog-react/src/utils/index.ts      |   2 +-
 .../src/components/SchemaView/ArrayView.tsx   |  60 ---
 .../src/components/SchemaView/ChildView.tsx   | 127 -------
 .../src/components/SchemaView/MatchView.tsx   |  46 ---
 .../components/SchemaView/MetadataView.tsx    | 108 ------
 .../src/components/SchemaView/ObjectView.tsx  |  95 -----
 .../src/components/SchemaView/ScalarView.tsx  |  34 --
 .../src/components/SchemaView/SchemaView.tsx  | 353 +++++++++++++++++-
 15 files changed, 361 insertions(+), 482 deletions(-)
 create mode 100644 .changeset/good-pens-dance.md
 delete mode 100644 plugins/config-schema/src/components/SchemaView/ArrayView.tsx
 delete mode 100644 plugins/config-schema/src/components/SchemaView/ChildView.tsx
 delete mode 100644 plugins/config-schema/src/components/SchemaView/MatchView.tsx
 delete mode 100644 plugins/config-schema/src/components/SchemaView/MetadataView.tsx
 delete mode 100644 plugins/config-schema/src/components/SchemaView/ObjectView.tsx
 delete mode 100644 plugins/config-schema/src/components/SchemaView/ScalarView.tsx

diff --git a/.changeset/good-pens-dance.md b/.changeset/good-pens-dance.md
new file mode 100644
index 0000000000..05ebce1bc6
--- /dev/null
+++ b/.changeset/good-pens-dance.md
@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-catalog-react': patch
+'@backstage/plugin-config-schema': patch
+---
+
+Internal refactor to break potential circular imports
diff --git a/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx b/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx
index eba4cc3a7a..fd88a7a31e 100644
--- a/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx
+++ b/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx
@@ -31,7 +31,7 @@ import {
   useEntityList,
 } from '../../hooks/useEntityListProvider';
 import { EntityFilter } from '../../types';
-import { reduceBackendCatalogFilters } from '../../utils';
+import { reduceBackendCatalogFilters } from '../../utils/filters';
 
 /** @public */
 export type AllowedEntityFilters<T extends DefaultEntityFilters> = {
diff --git a/plugins/catalog-react/src/components/UserListPicker/useAllEntitiesCount.ts b/plugins/catalog-react/src/components/UserListPicker/useAllEntitiesCount.ts
index cecd0e4db7..fa564382d8 100644
--- a/plugins/catalog-react/src/components/UserListPicker/useAllEntitiesCount.ts
+++ b/plugins/catalog-react/src/components/UserListPicker/useAllEntitiesCount.ts
@@ -20,7 +20,7 @@ import { useMemo, useRef } from 'react';
 import useAsync from 'react-use/esm/useAsync';
 import { catalogApiRef } from '../../api';
 import { useEntityList } from '../../hooks';
-import { reduceCatalogFilters } from '../../utils';
+import { reduceCatalogFilters } from '../../utils/filters';
 
 export function useAllEntitiesCount() {
   const catalogApi = useApi(catalogApiRef);
diff --git a/plugins/catalog-react/src/components/UserListPicker/useOwnedEntitiesCount.ts b/plugins/catalog-react/src/components/UserListPicker/useOwnedEntitiesCount.ts
index 10481e80a8..dbdc040165 100644
--- a/plugins/catalog-react/src/components/UserListPicker/useOwnedEntitiesCount.ts
+++ b/plugins/catalog-react/src/components/UserListPicker/useOwnedEntitiesCount.ts
@@ -21,7 +21,7 @@ import useAsync from 'react-use/esm/useAsync';
 import { catalogApiRef } from '../../api';
 import { EntityOwnerFilter, EntityUserFilter } from '../../filters';
 import { useEntityList } from '../../hooks';
-import { CatalogFilters, reduceCatalogFilters } from '../../utils';
+import { CatalogFilters, reduceCatalogFilters } from '../../utils/filters';
 import useAsyncFn from 'react-use/esm/useAsyncFn';
 import useDeepCompareEffect from 'react-use/esm/useDeepCompareEffect';
 
diff --git a/plugins/catalog-react/src/components/UserListPicker/useStarredEntitiesCount.ts b/plugins/catalog-react/src/components/UserListPicker/useStarredEntitiesCount.ts
index 082c683642..70dde024f8 100644
--- a/plugins/catalog-react/src/components/UserListPicker/useStarredEntitiesCount.ts
+++ b/plugins/catalog-react/src/components/UserListPicker/useStarredEntitiesCount.ts
@@ -23,7 +23,7 @@ import useAsync from 'react-use/esm/useAsync';
 import { catalogApiRef } from '../../api';
 import { EntityUserFilter } from '../../filters';
 import { useEntityList, useStarredEntities } from '../../hooks';
-import { reduceCatalogFilters } from '../../utils';
+import { reduceCatalogFilters } from '../../utils/filters';
 
 export function useStarredEntitiesCount() {
   const catalogApi = useApi(catalogApiRef);
diff --git a/plugins/catalog-react/src/filters.ts b/plugins/catalog-react/src/filters.ts
index 6c68dad9aa..c033298983 100644
--- a/plugins/catalog-react/src/filters.ts
+++ b/plugins/catalog-react/src/filters.ts
@@ -22,7 +22,7 @@ import {
 } from '@backstage/catalog-model';
 import { AlphaEntity } from '@backstage/catalog-model/alpha';
 import { EntityFilter, UserListFilterKind } from './types';
-import { getEntityRelations } from './utils';
+import { getEntityRelations } from './utils/getEntityRelations';
 
 /**
  * Filter entities based on Kind.
diff --git a/plugins/catalog-react/src/hooks/useEntityListProvider.tsx b/plugins/catalog-react/src/hooks/useEntityListProvider.tsx
index 274ec52a18..b96357eb62 100644
--- a/plugins/catalog-react/src/hooks/useEntityListProvider.tsx
+++ b/plugins/catalog-react/src/hooks/useEntityListProvider.tsx
@@ -48,7 +48,7 @@ import {
   reduceBackendCatalogFilters,
   reduceCatalogFilters,
   reduceEntityFilters,
-} from '../utils';
+} from '../utils/filters';
 import { useApi } from '@backstage/core-plugin-api';
 import { QueryEntitiesResponse } from '@backstage/catalog-client';
 
diff --git a/plugins/catalog-react/src/utils/index.ts b/plugins/catalog-react/src/utils/index.ts
index 5afc32af63..5b2159ae2f 100644
--- a/plugins/catalog-react/src/utils/index.ts
+++ b/plugins/catalog-react/src/utils/index.ts
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export * from './filters';
+
 export { getEntityRelations } from './getEntityRelations';
 export { getEntitySourceLocation } from './getEntitySourceLocation';
 export type { EntitySourceLocation } from './getEntitySourceLocation';
diff --git a/plugins/config-schema/src/components/SchemaView/ArrayView.tsx b/plugins/config-schema/src/components/SchemaView/ArrayView.tsx
deleted file mode 100644
index abe2cfc327..0000000000
--- a/plugins/config-schema/src/components/SchemaView/ArrayView.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-/*
- * Copyright 2021 The Backstage Authors
- *
- * 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 Box from '@material-ui/core/Box';
-import Typography from '@material-ui/core/Typography';
-import { Schema } from 'jsonschema';
-import React from 'react';
-import { ChildView } from './ChildView';
-import { MetadataView } from './MetadataView';
-import { SchemaViewProps } from './types';
-
-export function ArrayView({ path, depth, schema }: SchemaViewProps) {
-  const itemDepth = depth + 1;
-  const itemPath = path ? `${path}[]` : '[]';
-  const itemSchema = schema.items;
-
-  return (
-    <>
-      <Box marginBottom={4}>
-        {schema.description && (
-          <Box marginBottom={4}>
-            <Typography variant="body1">{schema.description}</Typography>
-          </Box>
-        )}
-        <MetadataView schema={schema} />
-      </Box>
-      <Typography variant="overline">Items</Typography>
-      <ChildView
-        lastChild
-        path={itemPath}
-        depth={itemDepth}
-        schema={itemSchema as Schema | undefined}
-      />
-      {schema.additionalItems && schema.additionalItems !== true && (
-        <>
-          <Typography variant="overline">Additional Items</Typography>
-          <ChildView
-            path={itemPath}
-            depth={itemDepth}
-            schema={schema.additionalItems}
-            lastChild
-          />
-        </>
-      )}
-    </>
-  );
-}
diff --git a/plugins/config-schema/src/components/SchemaView/ChildView.tsx b/plugins/config-schema/src/components/SchemaView/ChildView.tsx
deleted file mode 100644
index b39e445688..0000000000
--- a/plugins/config-schema/src/components/SchemaView/ChildView.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-/*
- * Copyright 2021 The Backstage Authors
- *
- * 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 { JsonValue } from '@backstage/types';
-import Box from '@material-ui/core/Box';
-import Chip from '@material-ui/core/Chip';
-import Divider from '@material-ui/core/Divider';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
-import { Schema } from 'jsonschema';
-import React, { useEffect, useRef } from 'react';
-import { useScrollTargets } from '../ScrollTargetsContext/ScrollTargetsContext';
-import { SchemaView } from './SchemaView';
-
-export interface MetadataViewRowProps {
-  label: string;
-  text?: string;
-  data?: JsonValue;
-}
-
-function titleVariant(depth: number) {
-  if (depth <= 1) {
-    return 'h2';
-  } else if (depth === 2) {
-    return 'h3';
-  } else if (depth === 3) {
-    return 'h4';
-  } else if (depth === 4) {
-    return 'h5';
-  }
-  return 'h6';
-}
-
-const useChildViewStyles = makeStyles(theme => ({
-  title: {
-    marginBottom: 0,
-  },
-  chip: {
-    marginLeft: theme.spacing(1),
-    marginRight: 0,
-    marginBottom: 0,
-  },
-}));
-
-export function ChildView({
-  path,
-  depth,
-  schema,
-  required,
-  lastChild,
-}: {
-  path: string;
-  depth: number;
-  schema?: Schema;
-  required?: boolean;
-  lastChild?: boolean;
-}) {
-  const classes = useChildViewStyles();
-  const titleRef = useRef<HTMLElement>(null);
-  const scroll = useScrollTargets();
-
-  useEffect(() => {
-    return scroll?.setScrollListener(path, () => {
-      titleRef.current?.scrollIntoView({ behavior: 'smooth' });
-    });
-  }, [scroll, path]);
-
-  const chips = new Array<JSX.Element>();
-  const chipProps = { size: 'small' as const, classes: { root: classes.chip } };
-
-  if (required) {
-    chips.push(
-      <Chip label="required" color="default" key="required" {...chipProps} />,
-    );
-  }
-
-  const visibility = (schema as { visibility?: string })?.visibility;
-  if (visibility === 'frontend') {
-    chips.push(
-      <Chip label="frontend" color="primary" key="visibility" {...chipProps} />,
-    );
-  } else if (visibility === 'secret') {
-    chips.push(
-      <Chip label="secret" color="secondary" key="visibility" {...chipProps} />,
-    );
-  }
-
-  return (
-    <Box paddingBottom={lastChild ? 4 : 8} display="flex" flexDirection="row">
-      <Divider orientation="vertical" flexItem />
-      <Box paddingLeft={2} flex={1}>
-        <Box
-          display="flex"
-          flexDirection="row"
-          marginBottom={2}
-          alignItems="center"
-        >
-          <Typography
-            ref={titleRef}
-            variant={titleVariant(depth)}
-            classes={{ root: classes.title }}
-          >
-            {path}
-          </Typography>
-          {chips.length > 0 && <Box marginLeft={1} />}
-          {chips}
-        </Box>
-        {schema && (
-          <SchemaView path={path} depth={depth} schema={schema as Schema} />
-        )}
-      </Box>
-    </Box>
-  );
-}
diff --git a/plugins/config-schema/src/components/SchemaView/MatchView.tsx b/plugins/config-schema/src/components/SchemaView/MatchView.tsx
deleted file mode 100644
index ba97ff9db5..0000000000
--- a/plugins/config-schema/src/components/SchemaView/MatchView.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * Copyright 2021 The Backstage Authors
- *
- * 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 Typography from '@material-ui/core/Typography';
-import { Schema } from 'jsonschema';
-import React from 'react';
-import { ChildView } from './ChildView';
-
-export function MatchView({
-  path,
-  depth,
-  schema,
-  label,
-}: {
-  path: string;
-  depth: number;
-  schema: Schema[];
-  label: string;
-}) {
-  return (
-    <>
-      <Typography variant="overline">{label}</Typography>
-      {schema.map((optionSchema, index) => (
-        <ChildView
-          key={index}
-          path={`${path}/${index + 1}`}
-          depth={depth + 1}
-          schema={optionSchema}
-          lastChild={index === schema.length - 1}
-        />
-      ))}
-    </>
-  );
-}
diff --git a/plugins/config-schema/src/components/SchemaView/MetadataView.tsx b/plugins/config-schema/src/components/SchemaView/MetadataView.tsx
deleted file mode 100644
index f3de041bed..0000000000
--- a/plugins/config-schema/src/components/SchemaView/MetadataView.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-/*
- * Copyright 2021 The Backstage Authors
- *
- * 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 { JsonValue } from '@backstage/types';
-import Paper from '@material-ui/core/Paper';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableRow from '@material-ui/core/TableRow';
-import Typography from '@material-ui/core/Typography';
-import { Schema } from 'jsonschema';
-import React from 'react';
-
-export interface MetadataViewRowProps {
-  label: string;
-  text?: string;
-  data?: JsonValue;
-}
-
-export function MetadataViewRow({ label, text, data }: MetadataViewRowProps) {
-  if (text === undefined && data === undefined) {
-    return null;
-  }
-  return (
-    <TableRow>
-      <TableCell style={{ width: 160 }}>
-        <Typography variant="body1" noWrap style={{ fontWeight: 900 }}>
-          {label}
-        </Typography>
-      </TableCell>
-      <TableCell>
-        <Typography variant="body1">
-          {data ? JSON.stringify(data) : text}
-        </Typography>
-      </TableCell>
-    </TableRow>
-  );
-}
-
-export function MetadataView({ schema }: { schema: Schema }) {
-  return (
-    <Paper variant="outlined" square style={{ width: '100%' }}>
-      <Table size="small">
-        <TableBody>
-          <MetadataViewRow label="Type" data={schema.type} />
-          <MetadataViewRow label="Allowed values" data={schema.enum} />
-          {schema.additionalProperties === true && (
-            <MetadataViewRow label="Additional Properties" text="true" />
-          )}
-          {schema.additionalItems === true && (
-            <MetadataViewRow label="Additional Items" text="true" />
-          )}
-          <MetadataViewRow label="Format" text={schema.format} />
-          <MetadataViewRow
-            label="Pattern"
-            text={schema.pattern && String(schema.pattern)}
-          />
-          <MetadataViewRow label="Minimum" data={schema.minimum} />
-          <MetadataViewRow label="Maximum" data={schema.maximum} />
-          <MetadataViewRow
-            label="Exclusive minimum"
-            data={schema.exclusiveMinimum}
-          />
-          <MetadataViewRow
-            label="Exclusive maximum"
-            data={schema.exclusiveMaximum}
-          />
-          <MetadataViewRow label="Multiple of" data={schema.multipleOf} />
-          <MetadataViewRow
-            label="Maximum number of items"
-            data={schema.maxItems}
-          />
-          <MetadataViewRow
-            label="Minimum number of items"
-            data={schema.minItems}
-          />
-          <MetadataViewRow
-            label="Maximum number of properties"
-            data={schema.maxProperties}
-          />
-          <MetadataViewRow
-            label="Minimum number of properties"
-            data={schema.minProperties}
-          />
-          <MetadataViewRow label="Maximum Length" data={schema.maxLength} />
-          <MetadataViewRow label="Minimum Length" data={schema.minLength} />
-          <MetadataViewRow
-            label="Items must be unique"
-            data={schema.uniqueItems}
-          />
-        </TableBody>
-      </Table>
-    </Paper>
-  );
-}
diff --git a/plugins/config-schema/src/components/SchemaView/ObjectView.tsx b/plugins/config-schema/src/components/SchemaView/ObjectView.tsx
deleted file mode 100644
index c7cf000e10..0000000000
--- a/plugins/config-schema/src/components/SchemaView/ObjectView.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-/*
- * Copyright 2021 The Backstage Authors
- *
- * 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 Box from '@material-ui/core/Box';
-import Typography from '@material-ui/core/Typography';
-import React from 'react';
-import { ChildView } from './ChildView';
-import { MetadataView } from './MetadataView';
-import { SchemaViewProps } from './types';
-
-function isRequired(name: string, required?: boolean | string[]) {
-  if (required === true) {
-    return true;
-  }
-  if (Array.isArray(required)) {
-    return required.includes(name);
-  }
-  return false;
-}
-
-export function ObjectView({ path, depth, schema }: SchemaViewProps) {
-  const properties = Object.entries(schema.properties ?? {});
-  const patternProperties = Object.entries(schema.patternProperties ?? {});
-
-  return (
-    <>
-      {depth > 0 && (
-        <Box marginBottom={4}>
-          {schema.description && (
-            <Box marginBottom={4}>
-              <Typography variant="body1">{schema.description}</Typography>
-            </Box>
-          )}
-          <MetadataView schema={schema} />
-        </Box>
-      )}
-      {properties.length > 0 && (
-        <>
-          {depth > 0 && <Typography variant="overline">Properties</Typography>}
-          {properties.map(([name, propSchema], index) => (
-            <ChildView
-              key={name}
-              path={path ? `${path}.${name}` : name}
-              depth={depth + 1}
-              schema={propSchema}
-              lastChild={index === properties.length - 1}
-              required={isRequired(name, schema.required)}
-            />
-          ))}
-        </>
-      )}
-      {patternProperties.length > 0 && (
-        <>
-          {depth > 0 && (
-            <Typography variant="overline">Pattern Properties</Typography>
-          )}
-          {patternProperties.map(([name, propSchema], index) => (
-            <ChildView
-              key={name}
-              path={path ? `${path}.<${name}>` : name}
-              depth={depth + 1}
-              schema={propSchema}
-              lastChild={index === patternProperties.length - 1}
-              required={isRequired(name, schema.required)}
-            />
-          ))}
-        </>
-      )}
-      {schema.additionalProperties && schema.additionalProperties !== true && (
-        <>
-          <Typography variant="overline">Additional Properties</Typography>
-          <ChildView
-            path={`${path}.*`}
-            depth={depth + 1}
-            schema={schema.additionalProperties}
-            lastChild
-          />
-        </>
-      )}
-    </>
-  );
-}
diff --git a/plugins/config-schema/src/components/SchemaView/ScalarView.tsx b/plugins/config-schema/src/components/SchemaView/ScalarView.tsx
deleted file mode 100644
index aeea1c04d7..0000000000
--- a/plugins/config-schema/src/components/SchemaView/ScalarView.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * Copyright 2021 The Backstage Authors
- *
- * 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 Box from '@material-ui/core/Box';
-import Typography from '@material-ui/core/Typography';
-import React from 'react';
-import { MetadataView } from './MetadataView';
-import { SchemaViewProps } from './types';
-
-export function ScalarView({ schema }: SchemaViewProps) {
-  return (
-    <>
-      {schema.description && (
-        <Box marginBottom={4}>
-          <Typography variant="body1">{schema.description}</Typography>
-        </Box>
-      )}
-      <MetadataView schema={schema} />
-    </>
-  );
-}
diff --git a/plugins/config-schema/src/components/SchemaView/SchemaView.tsx b/plugins/config-schema/src/components/SchemaView/SchemaView.tsx
index defb7fc353..d7a8db4f69 100644
--- a/plugins/config-schema/src/components/SchemaView/SchemaView.tsx
+++ b/plugins/config-schema/src/components/SchemaView/SchemaView.tsx
@@ -14,11 +14,20 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { ArrayView } from './ArrayView';
-import { MatchView } from './MatchView';
-import { ObjectView } from './ObjectView';
-import { ScalarView } from './ScalarView';
+import { JsonValue } from '@backstage/types';
+import Box from '@material-ui/core/Box';
+import Chip from '@material-ui/core/Chip';
+import Divider from '@material-ui/core/Divider';
+import Paper from '@material-ui/core/Paper';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableRow from '@material-ui/core/TableRow';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+import { Schema } from 'jsonschema';
+import React, { useEffect, useRef } from 'react';
+import { useScrollTargets } from '../ScrollTargetsContext/ScrollTargetsContext';
 import { SchemaViewProps } from './types';
 
 export function SchemaView(props: SchemaViewProps) {
@@ -60,3 +69,337 @@ export function SchemaView(props: SchemaViewProps) {
       return <ScalarView {...props} />;
   }
 }
+
+function ArrayView({ path, depth, schema }: SchemaViewProps) {
+  const itemDepth = depth + 1;
+  const itemPath = path ? `${path}[]` : '[]';
+  const itemSchema = schema.items;
+
+  return (
+    <>
+      <Box marginBottom={4}>
+        {schema.description && (
+          <Box marginBottom={4}>
+            <Typography variant="body1">{schema.description}</Typography>
+          </Box>
+        )}
+        <MetadataView schema={schema} />
+      </Box>
+      <Typography variant="overline">Items</Typography>
+      <ChildView
+        lastChild
+        path={itemPath}
+        depth={itemDepth}
+        schema={itemSchema as Schema | undefined}
+      />
+      {schema.additionalItems && schema.additionalItems !== true && (
+        <>
+          <Typography variant="overline">Additional Items</Typography>
+          <ChildView
+            path={itemPath}
+            depth={itemDepth}
+            schema={schema.additionalItems}
+            lastChild
+          />
+        </>
+      )}
+    </>
+  );
+}
+
+function isRequired(name: string, required?: boolean | string[]) {
+  if (required === true) {
+    return true;
+  }
+  if (Array.isArray(required)) {
+    return required.includes(name);
+  }
+  return false;
+}
+
+function ObjectView({ path, depth, schema }: SchemaViewProps) {
+  const properties = Object.entries(schema.properties ?? {});
+  const patternProperties = Object.entries(schema.patternProperties ?? {});
+
+  return (
+    <>
+      {depth > 0 && (
+        <Box marginBottom={4}>
+          {schema.description && (
+            <Box marginBottom={4}>
+              <Typography variant="body1">{schema.description}</Typography>
+            </Box>
+          )}
+          <MetadataView schema={schema} />
+        </Box>
+      )}
+      {properties.length > 0 && (
+        <>
+          {depth > 0 && <Typography variant="overline">Properties</Typography>}
+          {properties.map(([name, propSchema], index) => (
+            <ChildView
+              key={name}
+              path={path ? `${path}.${name}` : name}
+              depth={depth + 1}
+              schema={propSchema}
+              lastChild={index === properties.length - 1}
+              required={isRequired(name, schema.required)}
+            />
+          ))}
+        </>
+      )}
+      {patternProperties.length > 0 && (
+        <>
+          {depth > 0 && (
+            <Typography variant="overline">Pattern Properties</Typography>
+          )}
+          {patternProperties.map(([name, propSchema], index) => (
+            <ChildView
+              key={name}
+              path={path ? `${path}.<${name}>` : name}
+              depth={depth + 1}
+              schema={propSchema}
+              lastChild={index === patternProperties.length - 1}
+              required={isRequired(name, schema.required)}
+            />
+          ))}
+        </>
+      )}
+      {schema.additionalProperties && schema.additionalProperties !== true && (
+        <>
+          <Typography variant="overline">Additional Properties</Typography>
+          <ChildView
+            path={`${path}.*`}
+            depth={depth + 1}
+            schema={schema.additionalProperties}
+            lastChild
+          />
+        </>
+      )}
+    </>
+  );
+}
+
+interface MetadataViewRowProps {
+  label: string;
+  text?: string;
+  data?: JsonValue;
+}
+
+function titleVariant(depth: number) {
+  if (depth <= 1) {
+    return 'h2';
+  } else if (depth === 2) {
+    return 'h3';
+  } else if (depth === 3) {
+    return 'h4';
+  } else if (depth === 4) {
+    return 'h5';
+  }
+  return 'h6';
+}
+
+const useChildViewStyles = makeStyles(theme => ({
+  title: {
+    marginBottom: 0,
+  },
+  chip: {
+    marginLeft: theme.spacing(1),
+    marginRight: 0,
+    marginBottom: 0,
+  },
+}));
+
+function ChildView({
+  path,
+  depth,
+  schema,
+  required,
+  lastChild,
+}: {
+  path: string;
+  depth: number;
+  schema?: Schema;
+  required?: boolean;
+  lastChild?: boolean;
+}) {
+  const classes = useChildViewStyles();
+  const titleRef = useRef<HTMLElement>(null);
+  const scroll = useScrollTargets();
+
+  useEffect(() => {
+    return scroll?.setScrollListener(path, () => {
+      titleRef.current?.scrollIntoView({ behavior: 'smooth' });
+    });
+  }, [scroll, path]);
+
+  const chips = new Array<JSX.Element>();
+  const chipProps = { size: 'small' as const, classes: { root: classes.chip } };
+
+  if (required) {
+    chips.push(
+      <Chip label="required" color="default" key="required" {...chipProps} />,
+    );
+  }
+
+  const visibility = (schema as { visibility?: string })?.visibility;
+  if (visibility === 'frontend') {
+    chips.push(
+      <Chip label="frontend" color="primary" key="visibility" {...chipProps} />,
+    );
+  } else if (visibility === 'secret') {
+    chips.push(
+      <Chip label="secret" color="secondary" key="visibility" {...chipProps} />,
+    );
+  }
+
+  return (
+    <Box paddingBottom={lastChild ? 4 : 8} display="flex" flexDirection="row">
+      <Divider orientation="vertical" flexItem />
+      <Box paddingLeft={2} flex={1}>
+        <Box
+          display="flex"
+          flexDirection="row"
+          marginBottom={2}
+          alignItems="center"
+        >
+          <Typography
+            ref={titleRef}
+            variant={titleVariant(depth)}
+            classes={{ root: classes.title }}
+          >
+            {path}
+          </Typography>
+          {chips.length > 0 && <Box marginLeft={1} />}
+          {chips}
+        </Box>
+        {schema && (
+          <SchemaView path={path} depth={depth} schema={schema as Schema} />
+        )}
+      </Box>
+    </Box>
+  );
+}
+
+function MatchView({
+  path,
+  depth,
+  schema,
+  label,
+}: {
+  path: string;
+  depth: number;
+  schema: Schema[];
+  label: string;
+}) {
+  return (
+    <>
+      <Typography variant="overline">{label}</Typography>
+      {schema.map((optionSchema, index) => (
+        <ChildView
+          key={index}
+          path={`${path}/${index + 1}`}
+          depth={depth + 1}
+          schema={optionSchema}
+          lastChild={index === schema.length - 1}
+        />
+      ))}
+    </>
+  );
+}
+
+function ScalarView({ schema }: SchemaViewProps) {
+  return (
+    <>
+      {schema.description && (
+        <Box marginBottom={4}>
+          <Typography variant="body1">{schema.description}</Typography>
+        </Box>
+      )}
+      <MetadataView schema={schema} />
+    </>
+  );
+}
+
+interface MetadataViewRowProps {
+  label: string;
+  text?: string;
+  data?: JsonValue;
+}
+
+function MetadataViewRow({ label, text, data }: MetadataViewRowProps) {
+  if (text === undefined && data === undefined) {
+    return null;
+  }
+  return (
+    <TableRow>
+      <TableCell style={{ width: 160 }}>
+        <Typography variant="body1" noWrap style={{ fontWeight: 900 }}>
+          {label}
+        </Typography>
+      </TableCell>
+      <TableCell>
+        <Typography variant="body1">
+          {data ? JSON.stringify(data) : text}
+        </Typography>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+function MetadataView({ schema }: { schema: Schema }) {
+  return (
+    <Paper variant="outlined" square style={{ width: '100%' }}>
+      <Table size="small">
+        <TableBody>
+          <MetadataViewRow label="Type" data={schema.type} />
+          <MetadataViewRow label="Allowed values" data={schema.enum} />
+          {schema.additionalProperties === true && (
+            <MetadataViewRow label="Additional Properties" text="true" />
+          )}
+          {schema.additionalItems === true && (
+            <MetadataViewRow label="Additional Items" text="true" />
+          )}
+          <MetadataViewRow label="Format" text={schema.format} />
+          <MetadataViewRow
+            label="Pattern"
+            text={schema.pattern && String(schema.pattern)}
+          />
+          <MetadataViewRow label="Minimum" data={schema.minimum} />
+          <MetadataViewRow label="Maximum" data={schema.maximum} />
+          <MetadataViewRow
+            label="Exclusive minimum"
+            data={schema.exclusiveMinimum}
+          />
+          <MetadataViewRow
+            label="Exclusive maximum"
+            data={schema.exclusiveMaximum}
+          />
+          <MetadataViewRow label="Multiple of" data={schema.multipleOf} />
+          <MetadataViewRow
+            label="Maximum number of items"
+            data={schema.maxItems}
+          />
+          <MetadataViewRow
+            label="Minimum number of items"
+            data={schema.minItems}
+          />
+          <MetadataViewRow
+            label="Maximum number of properties"
+            data={schema.maxProperties}
+          />
+          <MetadataViewRow
+            label="Minimum number of properties"
+            data={schema.minProperties}
+          />
+          <MetadataViewRow label="Maximum Length" data={schema.maxLength} />
+          <MetadataViewRow label="Minimum Length" data={schema.minLength} />
+          <MetadataViewRow
+            label="Items must be unique"
+            data={schema.uniqueItems}
+          />
+        </TableBody>
+      </Table>
+    </Paper>
+  );
+}