Merge pull request #21455 from backstage/freben/dep-role

lint for illegal role-to-role dependency chains

plugins/bazaar/package.json

@@ -34,7 +34,6 @@
     "@backstage/core-components": "workspace:^",
     "@backstage/core-plugin-api": "workspace:^",
     "@backstage/errors": "workspace:^",
-    "@backstage/plugin-catalog": "workspace:^",
     "@backstage/plugin-catalog-react": "workspace:^",
     "@backstage/theme": "workspace:^",
     "@date-io/luxon": "1.x",

plugins/bazaar/src/components/CardContentFields/AboutField.tsx

@@ -0,0 +1,72 @@
+/*
+ * Copyright 2020 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 { useElementFilter } from '@backstage/core-plugin-api';
+import { Grid, makeStyles, Typography } from '@material-ui/core';
+import React from 'react';
+
+const useStyles = makeStyles(theme => ({
+  value: {
+    fontWeight: 'bold',
+    overflow: 'hidden',
+    lineHeight: '24px',
+    wordBreak: 'break-word',
+  },
+  label: {
+    color: theme.palette.text.secondary,
+    textTransform: 'uppercase',
+    fontSize: '10px',
+    fontWeight: 'bold',
+    letterSpacing: 0.5,
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+  },
+}));
+
+/**
+ * Props for {@link AboutField}.
+ */
+export interface AboutFieldProps {
+  label: string;
+  value?: string;
+  gridSizes?: Record<string, number>;
+  children?: React.ReactNode;
+}
+
+export function AboutField(props: AboutFieldProps) {
+  const { label, value, gridSizes, children } = props;
+  const classes = useStyles();
+
+  const childElements = useElementFilter(children, c => c.getElements());
+
+  // Content is either children or a string prop `value`
+  const content =
+    childElements.length > 0 ? (
+      childElements
+    ) : (
+      <Typography variant="body2" className={classes.value}>
+        {value || `unknown`}
+      </Typography>
+    );
+  return (
+    <Grid item {...gridSizes}>
+      <Typography variant="h2" className={classes.label}>
+        {label}
+      </Typography>
+      {content}
+    </Grid>
+  );
+}

plugins/bazaar/src/components/CardContentFields/CardContentFields.tsx

@@ -25,8 +25,8 @@ import {
 import { parseEntityRef } from '@backstage/catalog-model';
 import { Avatar, Link } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
-import { AboutField } from '@backstage/plugin-catalog';
 import { entityRouteRef } from '@backstage/plugin-catalog-react';
+import { AboutField } from './AboutField';
 import { StatusTag } from '../StatusTag';
 import { Member, BazaarProject } from '../../types';